javascript - jQuery最接近的不想工作

我已经在页面上重复了一个图像，它旁边有一个div，如下所示:

 <img src="/img/productspage/questionMark.jpg" class="prodQuestionMark" />
            <div class="vuQuestionBubble">
                <p>this is where text for the text will go</p>
            </div>

vuQuestionBubble具有样式显示:默认为无。单击“prodQuestionMark”时，我要显示它旁边的vuQuestionBubble。香港专业教育学院将此代码放在底部。

$(document).ready(function () {
    $('.prodQuestionMark').click(function () {

        $(this).closest('vuQuestionBubble').show();
    });
});

它似乎不起作用... click事件正在起作用，我可以使用.parent选择父div，但似乎无法与最接近的div交互...有什么想法吗？

最佳答案

closest寻找祖先，而不是 sibling ；另外，您的选择器在开始时就缺少.(您要告诉它查找vuQuestionBubble元素，在这里您实际上是指带有“vuQuestionBubble”类的div)。

在当前结构下，可以使用 next ，因为带有“vuQuestionBubble”的div是下一个元素。但是，如果您更改结构并在它们之间放置一些东西，next将不适合您。

我可能会使用nextAll("div.vuQuestionBubble:first")或nextAll(".vuQuestionBubble:first")(链接: nextAll ， :first ):

$(document).ready(function () {
    $('.prodQuestionMark').click(function () {

        $(this).nextAll('div.vuQuestionBubble:first').show();
        // Or without `div`:
        //$(this).nextAll('.vuQuestionBubble:first').show();
    });
});

这样就可以找到第一个div，其类“vuQuestionBubble”紧跟在img之后，即使它不是img旁边的那个，也是如此，因此，如果标记稍有变化，则使您的代码不太容易受到维护问题的影响。