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

我基本上有多个div，其中包含不同单词（单词，定义等）的信息，全部在一个页面上。因此，每个“字牌”被写成如下（我拿出一些额外的东西）：jQuery，使用自定义属性创建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创建一个“Define”链接来切换相应的#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并在第二个集合上将wordID更改为2，则第二个div的定义链接不会执行任何操作。第一个仍然按照它的设想工作。

有什么我需要改变，以使jQuery的工作正常为每wordID的属性值？

谢谢！

来源

2012-07-05 Shiv

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

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

来源

2012-07-05 02:28:56 xdazz

完美的作品！下面是一个演示，其他人都在想它会是什么样子。 http://jsfiddle.net/HVVgH/ 非常感谢！ – Shiv

@Shiv很高兴帮助。你应该考虑改变ID卡'卡'类，不应该存在重复的ID。 – xdazz

是的，我现在要改变它...感谢通知！ :) – Shiv

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

来源

2012-07-05 02:26:21 imm

按照前文的答案，你不能有自己的网页上相同id属性超过一个元素。

我也尝试使用自定义的工作属性之前，但他们是有问题的，而不是严格有效的HTML。我现在用的是采用何种方法，你的wordID中元素的id属性如下：

<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-05 02:38:33

这也很完美！我喜欢你还将default状态添加为hide（）。非常感谢！ :) – Shiv

不客气！我认为xdazz的解决方案对于您的特定问题是优越的，但是如果有人不一定希望将包含在同一个div中的锚定作为要显示的元素，我的解决方案将工作（一般情况下）。 –

是的，我刚刚意识到，我可能需要使用你的解决方案，因为我没有与显示元素相同的div包裹的锚！ – Shiv

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

回答

相关问题