1

我有一些要点，我想在点击它们时在它们下方显示更多文本。它们都是两个独立的 P，通过共享一个共同的 id 配对在一起。因此，我在下面要做的是找到具有 (id_same_as_this.class) 的元素，以便切换具有“扩展”类的元素以及与单击的 P 匹配的 id。那有意义吗？ 

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

我只问上面的代码是否可以工作，因为与我读过的许多示例相比，它会使我网页中的可扩展项目符号点的代码密集度显着降低。

4

4 回答 4

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

一定是

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

你错过了#那里。也就是说，你永远不应该有一个共同的 ID。根据定义，ID 是唯一的。如果您在多个元素上具有相同的 ID，虽然它现在可以在您尝试的浏览器上工作，但您不能保证它不会在 jQuery（或 Chrome、Konqueror 或 iOS Safari）的下一个版本中中断。也没有理由这样做。您可以只使用类或data-*属性。

于 2013-07-16T18:15:40.850 回答
1

是的，这会起作用，但您需要在 ID 前加上 #

于 2013-07-16T18:18:32.490 回答
1

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

ID 是唯一的。两个元素不能共享一个公共 ID，因为这违背了拥有唯一标识符的整个目的。JavaScript 假定您使用的是有效的 HTML，因此document.getElementById()只会返回第一个匹配id. 通过使用非唯一 ID，事情将开始以不可预知的方式中断：

$('#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);
});
于 2013-07-16T18:23:58.107 回答
0

你根本不需要id这个值（这很好，从饥饿痛苦答案的评论来看，你id在多个元素上使用了相同的值，这是无效的）。

只需这样做：

$(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")获取它。

于 2013-07-17T07:24:27.560 回答