javascript - jquery closest 不想工作

Question

我在页面下方重复了一张图片，旁边有一个 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 默认有一个样式 display:none。单击“prodQuestionMark”时，我希望它旁边的 vuQuestionBubble 显示。我把这段代码放在底部。

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

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

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

Answer 1

closest 查找祖先，而不是 sibling ；此外，您的选择器在开头缺少 . (您告诉它寻找 vuQuestionBubble 元素，您真正的意思是 div 使用类“vuQuestionBubble”)。

对于您当前的结构，您可以使用 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();
    });
});

这将找到第一个类为“vuQuestionBubble”的 div，它位于 img 之后作为兄弟，即使它不是 right 旁边的那个img，因此如果标记发生轻微变化，您的代码将不易受到维护问题的影响。