Jquery fancybox plugin using arrays in code?

问题

I've got a Jquery plugin for a fancybox, which I know works when I use the following code:

$("a#roomthumb_2237").fancybox({ 
        'href'   : '#2237_Info',
        'titleShow'  : false, 
        'transitionIn'  : 'elastic', 
        'transitionOut' : 'elastic' 
});

But to stop me having to repeat this code multiple times (with different href values), I'd like to run it in a for loop.

The code I've tried is:

for (var i = 0; i < rooms_array.length; i++) {
    var d = "#roomthumb_"+rooms_array[i]
    $(d).fancybox({ 
        'href'   : rooms_array[i]+'_Info', 
        'titleShow'  : false, 
        'transitionIn'  : 'elastic', 
        'transitionOut' : 'elastic' 
    });
};

The original code I took straight from google (it may well have been from stackoverflow, I can't remember), but as soon as I try to put it the loop, I'm lost, since I've no idea how to write it. I think the href line is wrong, but I can't find anything that explains how to do what I need it to.

I dont know how to write the $("a#roomthumb_2237") as $("a"+d) for example...

回答1:

The normal use for the html <a> tag is to have the href attribute so if you have for instance:

<a class="fancybox" href="#2237_Info">2237</a>
<a class="fancybox" href="#2238_Info">2238</a>
<a class="fancybox" href="#2239_Info">2239</a>

then you only need a single fancybox script (one and only)

$("a.fancybox").fancybox({ 
        'titleShow'  : false, 
        'transitionIn'  : 'elastic', 
        'transitionOut' : 'elastic' 
});

Notice that we used class="fancybox" because as mentioned previously, you shouldn't use the same ID more then once within the same document (IDs are unique)

Also notice that you don't need to set the option href within your fancybox script since this is taken from the <a> tag itself (the href option is used when it doesn't exist as an attribute in the selector -or- when you want to "force" a different href from the selector.)

On the other hand, if what you don't want to do is to write manually all the <a> elements but generating them from an array, then check https://stackoverflow.com/a/10093265/1055987

回答2:

Why not just set a class on the href and use a class selector to call FancyBox?

HTML

<a href="whatever.jpg" class="fancyboxMe" id="roomthumb_2237">Anchor</a>
<a href="whatever2.jpg" class="fancyboxMe" id="roomthumb_2233">Anchor</a>

JavaScript

$("a.fancyboxMe").fancybox({ 
        'href'   : '#2237_Info',
        'titleShow'  : false, 
        'transitionIn'  : 'elastic', 
        'transitionOut' : 'elastic' 
});

回答3:

I fixed my own issue. My loop was fine, the only line of text that was wrong, which is what I thought, was:

    'href'   : rooms_array[i]+'_Info',

I needed to be:

    'href'   : '#'+rooms_array[i]+'_Info',

Which now I've noticed, is really obvious... I hadn't added the selector.

Edit: Here is my full code, which now works. Note - I've chosen random numbers for my array, just to show the idea:

var rooms_array = [2235, 2236, 2237, 2238]; 
var reposition = function (){ 
    $('#hidden_stuff').attr('display', "none"); 

    $.each(rooms_array, function(key,value){ 
        var a = '#roomthumb_'+value;  
        var b = '#chosenrate_'+value; 

        if ($(b).length) { 
            var c = $(b).offset();  

            $(a).css({ 
                visibility:"visible", 
                top: c.top -9 + "px", 
                left: c.left + 560 + "px" 
            })
        }
        else{ 
        } 

        $(a).fancybox({ 
            'href'   : '#'+value+'_Info', 
            'titleShow'  : false, 
            'transitionIn'  : 'elastic', 
            'transitionOut' : 'elastic' 
        });
    }); 
};

来源：https://stackoverflow.com/questions/11385211/jquery-fancybox-plugin-using-arrays-in-code

标签

jquery

jquery-plugins

for-loop

fancybox