0

我基本上有多个 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 属性值正确工作吗？

谢谢！

4

3 回答 3

1

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

于 2012-07-05T02:26:21.623 回答
1

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

$(".definition").click(function(evt) {
    evt.preventDefault();
    $(this).siblings('.card-info-box').toggle();
});
于 2012-07-05T02:28:56.290 回答
0

根据之前的答案，您的页面上不能有多个具有相同 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;
    });
});​

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

于 2012-07-05T02:38:33.427 回答