javascript - .next() 不适用于所有 div

Question

jsFiddle

上面是我的代码的 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;
}

Updated fiddle

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