Question

我有一些要点，我想在点击它们下面显示更多文字。它们都是两个独立的P，通过共享一个共同的id配对在一起。所以，我在下面尝试做的是找到带有（id_same_as_this.class）的元素，以便切换具有类“expand”的元素以及与单击的P匹配的id。那有意义吗？

$(document).ready(function(){
    $(".expandable").click(function(){
        $(this.attr('id')+"."+"expand").toggle(800);
    });     
});

我只询问上面的代码是否可以正常工作，因为它会使我网页中的可扩展项目符号明显少于我读过的很多示例。

Answer 1

  $(this.attr('id')+"."+"expand").toggle(800);

必须

  $("#" + this.id +".expand").toggle(800);

你错过了那里的#。也就是说，你不应该有一个共同的ID。 By definition IDs are meant to be unique。如果您在多个元素上拥有相同的ID，虽然它现在可以在您尝试的浏览器上使用，但您无法保证它不会在下一轮jQuery（或Chrome，Konqueror或iOS Safari）中破坏。这样做也没有原因。您可以使用类或data-*属性。

Answer 2

是的，这会有效，但你需要在ID

之前＃

Answer 3

它们都是两个独立的P，它们通过共享一个共同的id配对在一起。

ID是唯一的。两个元素不能共享一个共同的ID，因为这会破坏拥有唯一标识符的整个目的。 JavaScript假定您使用的是有效的HTML，因此document.getElementById()将仅返回匹配id的第一个元素。通过使用非唯一ID，事情将开始破坏in unpredictable ways：

$('#foo').find('.bar') // Won't search past first #foo
$('#foo .bar')         // Will search past first #foo in IE8+

尝试重构HTML以简化此任务。也许你可以这样做：

<ul id="bullets">
    <li>
        <h2>Title</div>
        <div>Text</div>
    </li>
</ul>

然后使用一个简单的事件处理程序：

$('#bullets h2').click(function() {
    $(this).next().toggle(800);
});

Answer 4

这根本不需要id值（这很好，因为对于hungerpain的答案的评论，你在多个元素上使用相同的id值，{ {3}}）。

这样做：

$(document).ready(function(){
    $(".expandable").click(function(){
        $(this).find(".expand").toggle(800);
    });     
});

这会在点击的expand中找到包含类expandable的元素。不依赖于未指定的选择器行为。

如果您确实需要expandable上的数据，只需将其放在data-*属性中即可。因此，而不是这个无效的结构：

<!-- INVALID -->
<div id="foo27" class="expandable">
    <div class="expand">...</div>
</div>
<div id="foo27" class="expandable">
    <div class="expand">...</div>
</div>

这样做

<!-- VALID -->
<div data-id="foo27" class="expandable">
    <div class="expand">...</div>
</div>
<div data-id="foo27" class="expandable">
    <div class="expand">...</div>
</div>

使用上面的代码进行扩展。如果您需要该值，请使用.attr("data-id")或.data("id")获取该值。

JQuery“＃id.class”Selector Mashup

4 个答案: