Javascript 如何将具有相同ID的div作为目标

我目前有一些ASP.Net代码，它构建输出，然后通过字符串文本显示输出。其想法是，对于每个

收据

，都有一个“查看更多”按钮，用于切换

显示的额外信息：无开始。我尝试使用
eq（）
方法尝试找到我想要切换的方法，因为我在
ul
中进行切换。我目前的代码是：

$("#btn-expand").click(function () {
    var ldx = $("#list li .active").index(); // Get the list number so we know what ID to work with
    var idx = $("#expand").next().index(); // Get the next ID index point

    // Check that it isn't going negative
    if (idx == -1 || ldx == -1) {
        // If it is, reset ldx
        ldx = 0;
        idx = 0;
    }

    $("#expand").eq(ldx).toggle(); // Toggle that one
    console.log(ldx);
});

第一个按钮工作正常，
console.log
显示
0
但是，所有其他按钮都不显示任何内容。我的HTML示例如下所示：

<ul id="list">
    <li class="active">
        Something <br />
        Something Again <br />
        <span id="btn-expand">[View more]</span>
        <div id="expand">
            Something hidden
        </div>
     </li>
     This <br />
     Shows <br />
     <span id="btn-expand">[View more]</span>
     <div id="expand">
         This is hidden until toggled
     </div>
     <li></li>
</ul>

#列表{
列表样式：无；
}
.主动{
显示：块；
}
#btn扩展{
光标：指针；
字体大小：9px；
左边距：10px；
}
#扩展{
显示：无；
}
李{
显示：无；
}
.btn{
背景：无；
填充：10px；
边框：1px实心#000；
左边距：50像素；
光标：指针；
}



这里有东西

又来了点什么
[查看更多信息]




这是隐藏的，嘘。。


你可以看到这个

切换不应该影响我
[查看更多信息]




但是切换应该会影响到我！


Prev-Next
id
在同一文档中应该是唯一的，用普通类替换重复的，r.g:

<ul id="list">
   <li class="active">
      Something <br />
      Something Again <br />
      <span class="btn-expand">[View more]</span>
      <div class="expand">
         Something hidden
      </div>
   </li>
      This <br />
      Shows <br />
      <span class="btn-expand">[View more]</span>
      <div class="expand">
         This is hidden until toggled
      </div>
   <li>
   </li>
</ul>

您可以只使用
next（）
，而不使用事件中的所有代码：

$(this).next(".expand").toggle();
//OR
$(this).next().toggle();

希望这有帮助



$（“.btn展开”）。单击（函数（）{
$（this.next（“.expand”）.toggle（）；
});



某物

再来点东西

[查看更多信息]
隐藏的东西


这

显示

[查看更多信息]
这是隐藏的，直到切换

将id更改为类，然后您只需要：

$(".btn-expand").click(function() {
   $(this).next().toggle();
   $(this).text(function(_, oldText){
       return oldText.indexOf('More') === -1 ? 'View More' :'View Less';
   })
});


$（文档）.ready（函数（）{
$（“#btn next”）。单击（函数（）{
var$list=$（“#list li”）；
var idx=$（“.active”）.removeClass（“active”）.next（）.index（）；
如果（idx==-1）{
idx=0；
}
$list.eq（idx）.addClass（“活动”）；
});
$（“#btn prev”）。单击（函数（）{
var$list=$（“#list li”）；
var idx=$（.active”）.removeClass（“active”）.prev（）.index（）；
如果（idx==-1）{
idx=0；
}
$list.eq（idx）.addClass（“活动”）；
});
$（“.btn展开”）。单击（函数（）{
//拨动
$（this.next（）.toggle（）；
});
});
#列表{
列表样式：无；
}
.主动{
显示：块；
}
#btn扩展{
光标：指针；
字体大小：9px；
左边距：10px；
}
李{
显示：无；
}
.btn{
背景：无；
填充：10px；
边框：1px实心#000；
左边距：50像素；
光标：指针；
}
.扩大内部{
显示：内联块；
宽度：100%；
}



这里有东西

又来了点什么
[查看更多信息]
这是隐藏的，嘘。。


你可以看到这个

切换不应该影响我
[查看更多信息]
但是切换应该会影响到我！


Prev-Next
不能对多个元素使用
id
，
$（“#expand”）
选择器将始终选择具有相同ìd”的第一个元素。对于JavaScript来说，我是一个新的ASP/PHP开发人员。谢谢你提出这个问题，但是，我要注意，@ChihabJRtry使用
data-*
attribute而不是
id
是否
active
也打算更改？@charlietfl active在
上工作，我只是补充说，如果它对我正在使用的代码造成某种干扰的话。我就是这样做的，所以我只是操纵它，因为我无法粘贴硬代码（敏感数据）。第一个可以再次工作，但其他人都不能@ZakariaAcharki:/I将它们全部更改为
id=
到
class=
，然后在我的JavaScript中，将
#
更改为
，除了
#列表
之外，并且只有第一个列表可以切换：/n不需要任何索引，只需使用
下一步（）
您可以编辑文章并更改它吗@谢谢你们两位！
$(".btn-expand").click(function() {
   $(this).next().toggle();
   $(this).text(function(_, oldText){
       return oldText.indexOf('More') === -1 ? 'View More' :'View Less';
   })
});