Question

所以我有基于网格的布局：

<div id="gridrow" class="clear">
<div id="gridsection" class="float-left">
    <div id="gridwrap">
        <div id="gridimage" class="clear"></div>
        <div id="gridtitle" class="clear">Title</div>
        <div id="gridinfo" class="clear">Info</div>
    </div>
</div>
<div id="gridsection" class="float-right">
    <div id="gridwrap">
        <div id="gridimage" class="clear"></div>
        <div id="gridtitle" class="clear">Title</div>
        <div id="gridinfo" class="clear">Info</div>
    </div>
</div>
<div id="gridsection" class="gridmiddle">
    <div id="gridwrap">
        <div id="gridimage" class="clear"></div>
        <div id="gridtitle" class="clear">Title</div>
        <div id="gridinfo" class="clear">Info</div>
    </div>
</div>

然后我有这个jQuery脚本：

$("#gridtitle").each(function(index){
    $("#gridtitle:eq("+index+")").click(function (){
        $("#gridimage:eq("+index+"), #gridinfo:eq("+index+")").slideToggle();
    });
});

我认为这会起作用（具有逻辑意义）然而，只有第一个网格元素可以工作，任何提示？

欲了解更多信息，请随时提出，

感谢。

Answer 1

不同的元素必须具有不同的ID。

如果两个或多个元素具有相同的ID，则仅使用第一个元素。

Answer 2

ID是唯一的，每个对象只能使用一个。您可以使用分类，并更改选择器：

$(".gridtitle").each(function(index){
    $(".gridtitle:eq("+index+")").click(function (){
        $(".gridimage:eq("+index+"),.gridinfo:eq("+index+")").slideToggle();
    });
});

Answer 3

那是因为gridtitle是id。您应该将其更改为class并选择它：

$(".gridtitle").each(function() { ... });

jQuery .each（）没有识别所有元素。

3 个答案: