Question

我使用jQuery创建将显示具有绝对位置的照片的按钮。但是，我尝试使用此配置代码。

$('#thumbsets li').each(function (i) {
    i = i+1;
    $(this).addClass('ts'+i);
});

$('#web_overview details').each(function (i) {
    i = i+1;
    $(this).addClass('panels'+i).hide();
});

之后，我将创建主按钮，因为我在每个类中都有指定的类。

$('#web_overview details').each(function (i) {
    i = i+1;
    $(this).addClass('panels'+i).hide(); //Hide all main photos

    // Create button command
    $('.ts'+i).bind({
        click: function() {
            $('.panels'+i).show(); //If clicked photos will show up

            //Fallback for the other photos
        }
    });
});

现在我的问题是，如果我单击.ts1，我怎么能再次加载上一张照片，因为.panels2卡在.panels1上

这是我的示例输出：

.ts1 - ＆gt; .panels1 | .ts2 - ＆gt; .panels2 | .ts1 - ＆gt; .panels1（如果我再次点击.ts1将其加载回框架.panels2将保留在.panels1的顶部。）

如果有人能告诉我如何解决这个问题，请提前致谢。

Answer 1

$('.ts'+i).bind({
    click: function() {
        $('.panels').hide();   //####### Is this what you are missing?  ########
        $('.panels'+i).show(); //If clicked photos will show up

        //Fallback for the other photos
    }
});

在打开新的.panels之前，您必须隐藏任何可见的$('.details').hide(); // hide all details $('#thumbsets li').bind('click',function() { var tsLi = $(this).index(); // all elements in collection are indexed $('.details').stop().fadeTo(400,0).eq(tsLi).fadeTo(400,1); });。

<小时/> 但是我觉得你过于复杂了......我曾经用过一次就像你那样为你的元素分配类。为什么不尝试更简单的事情？

{{1}}

这就是全部！

自定义jQuery库设置

1 个答案:

DEMO JSFiddle