0

我有一个用于花式框的 Jquery 插件，我知道当我使用以下代码时它可以工作：

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

但是为了避免我不得不多次重复这段代码（使用不同的 href 值），我想在 for 循环中运行它。

我试过的代码是：

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' 
    });
};

我直接从谷歌获取的原始代码（很可能来自stackoverflow，我不记得了），但是一旦我尝试将其放入循环中，我就迷路了，因为我不知道如何编写它。我认为 href 行是错误的，但我找不到任何解释如何做我需要它的东西。

例如，我不知道如何将 $("a#roomthumb_2237") 写为 $("a"+d) ...

4

3 回答 3

1

<a>html标签的正常用途是具有href属性，例如，如果您有：

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

那么你只需要一个fancybox脚本（一个且唯一）

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

请注意，我们之所以使用它class="fancybox"是因为如前所述，您不应该在同一个文档中ID多次使用相同的文档（IDs是唯一的）

另请注意，您不需要href在您的 fancybox 脚本中设置选项，因为这是从<a>标签本身获取的（该href选项在选择器中不作为属性存在时使用 - 或者 - 当您想要“强制"href与选择器不同。）

另一方面，如果您不想手动编写所有<a>元素但从数组中生成它们，请检查https://stackoverflow.com/a/10093265/1055987

于 2012-07-08T20:10:47.770 回答
0

为什么不在 href 上设置一个类并使用类选择器来调用 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' 
});
于 2012-07-08T17:49:11.777 回答
0

我解决了我自己的问题。我的循环很好，唯一错误的文本行，这就是我的想法，是：

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

我需要：

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

现在我注意到了，这真的很明显......我没有添加选择器。

编辑： 这是我的完整代码，现在可以使用。注意 - 我为我的数组选择了随机数，只是为了展示这个想法：

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' 
        });
    }); 
};
于 2012-07-08T19:54:12.373 回答