.next() 不适用于所有 div答案

【问题标题】：.next() not working on all divs.next() 不适用于所有 div
【发布时间】：2015-08-04 05:53:26
【问题描述】：

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

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

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

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

谢谢！

【问题讨论】：

id 选择器在网站上必须是唯一的。
来吧，4 票否决？问题的罪魁祸首很简单（ids 不是唯一的），但我想这对提问者来说一定是非常令人沮丧的......问题似乎还可以 - 我们对问题进行了简单易读的描述。
好心，@bardzusny
@bardzusny，不，我不是......一次学习所有的网络开发可能会导致这样的缺陷，这个问题可能很愚蠢......：P

【解决方案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 代码的影响。你也应该把它改成一个类。

【讨论】：