.next() 不适用于所有 div

Question

以上是我的代码的 jsFiddle。注意：CSS 是正确的，不需要摆弄。

您可能正在查看结果，有些地址前面有一个加号 (+)。单击带加号的最上面的单元格时，您会看到地标文本。但是当您单击其余部分时，它不起作用。这是我使用的JQuery：

$('#landmark').click(function () {     
    $(this).next('#theLandmark').slideToggle();
});

其中 #landmark 是加号 (+)，其余地标文本是 #theLandmark。 HTML/CSS/jQuery 工作正常，因为它是第一次工作。但我觉得还有一些 jQuery 缺失的代码可以更正它。

谢谢！

Answer 1

问题是因为您在元素中复制了 landmark 和 theLandmark id 属性。 id 在页面内必须是唯一的。如果将它们转换为 class 属性，您的代码可以正常工作：

$('.landmark').click(function () {
    $(this).next('.theLandmark').slideToggle();
});

<!-- one example instance... -->
<div class='landmark'>+</div>)
<div class='theLandmark hide'><b id='lmText'>Landmark: </b>Dharmkata</div>

.landmark {
    cursor: pointer;
    display: inline-block;
}
.theLandmark {
    font-size: 12px;
}

请注意，#lmtext 也会重复，尽管该元素不受您的 JS 代码影响。您也应该将其更改为 class。

.next() not working on all divs