jquery 最接近的不想工作

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 寻找祖先，而不是兄弟姐妹；另外，您的选择器在开头缺少 . （您告诉它寻找 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 后面，即使它不是那个 正确的 位于 img 旁边，因此如果标记稍有更改，您的代码就不易受到维护问题的影响。

Answer 2

closest 函数查找距离该元素最近的祖先。您实际上需要使用 .next('.vuQuestionBubble')。

Answer 3

vuQuestionBubble 是一个类

$(this).closest('vuQuestionBubble').show();
=>
$(this).closest('.vuQuestionBubble').show();

Answer 4

closest 遍历到祖先元素，因此尝试 siblings('vuQuestionBubble')

Answer 5

描述：获取第一个祖先
与选择器匹配的元素，
从当前元素开始并且
在 DOM 树中向上推进

进行翻译：最接近的显然是祖先，而不是兄弟姐妹。

参考： http://api.jquery.com/closest/

休息一下，准备一个工具包 -吉。