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创建一个“定义”链接来切换相应的#definition div。到目前为止，我有以下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

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

Answer 2

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

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

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

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

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

3 个答案: