jQuery，使用自定义属性创建 div 的多个实例

Question

>我基本上有多个div，其中包含不同单词（单词，定义等）的信息。所以每个"单词卡"都写成如下（我去掉了一些额外的东西）：

<div id="card">
    <div class="card-info-box" id="definition" wordID="1">To lessen or get rid of any pain or suffering.</div>
    <a href="#" class="definition" wordID="1">Define</a> 
</div> 

我为每个单词添加了"wordID"的自定义属性。我正在尝试使用 jQuery 创建一个"定义"链接，该链接切换相应的div #definition。到目前为止，我有以下jQuery代码：

    $(document).ready(function() {
    $('#definition').hide();
    $(".definition").click(function(evt) {
        var d = $(this).attr("wordID");
        $("#definition[wordID=" + d + "], #definition[wordID=" + d + "]").toggle();
    }); 
});

现在，页面上只有一张卡片，jQuery可以很好地切换其各自的定义div。但是，如果我复制卡片div 并在第二组上将 wordID 更改为 2，则第二个div 的定义链接不会执行任何操作。第一个仍然按预期工作。

我是否需要更改某些内容，以便jQuery对每个wordID属性值正常工作？

谢谢！

Answer 1

试试下面。您不需要使用属性选择器，您可以使用$(this).siblings('.card-info-box')来选择要切换的div。

$(".definition").click(function(evt) {
    evt.preventDefault();
    $(this).siblings('.card-info-box').toggle();
}); 

Answer 2

据我所知，你不能有多个具有相同ID的元素，即使它们具有不同的属性。尝试仅使用类或数据项名称。

Answer 3

根据之前的答案，您的页面上不能有多个具有相同 id 属性的元素。

我以前也尝试过使用自定义属性，但它们有问题并且不是严格的有效 html。我现在使用的方法是在元素的 id 属性中使用您的 wordID，如下所示：

<div id="card-1">
  <div class="card-info-box" id="definition-1">To lessen or get rid of any pain or suffering.</div>
  <a href="#" class="definition" id="define-word-1">Define</a>
</div> 
<div id="card-2">
  <div class="card-info-box" id="definition-2">A state of general wellbeing.</div>
  <a href="#" class="definition" id="define-word-2">Define</a>
</div>

然后根据需要构造关联的 ID 值。

$(document).ready(function() {
  $('.card-info-box').hide();
  $(".definition").click(function(evt) {
        var d = $(this).attr("id").replace("define-word-", "");
        $("#definition-" + d).toggle();
        return false;
    });
});​

（编辑以添加返回值以防止点击链接/浏览器跳回到页面顶部）