jquery .next()不能在所有div上工作

f87krz0w 于 2023-06-22 发布在 jQuery

关注(0)|答案(1)|浏览(191)

上面是我的代码jsFiddle。注意：CSS是正确的，不需要修改。
正如您可能正在查看的结果，在某些地址前面有一个加号（+）。当您单击带有加号的最上面的单元格时，您会看到地标文本。但是当你点击其余部分时，它就不起作用了。下面是我使用的jQuery：

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

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

1条答案

问题是因为在元素中重复了landmark和theLandmarkid属性。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代码的影响。你也应该把它改成一个类。