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默认显示样式：none。当点击'prodQuestionMark'时，我希望它旁边的vuQuestionBubble显示。我把这个代码放在最底层。

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

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

它似乎不起作用... click事件正在工作，我可以用.parent选择父div，但似乎无法与最近的div进行交互...任何想法？

Answer 1

closest寻找祖先，而不是兄弟姐妹;另外，您的选择器在开头缺少.（您告诉它要查找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();
    });
});

即使它不是img旁边的 right ，也会找到第一个带有“vuQuestionBubble”类的第一个div，该类在img之后作为兄弟，因此，如果标记略有变化，则会使您的代码不易受到维护问题的影响。

Answer 2

closest函数找到与元素最接近的祖先。您实际上需要使用.next('.vuQuestionBubble')。

Answer 3

vuQuestionBubble是一个类

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

Answer 4

描述：获得第一个祖先与选择器匹配的元素，从当前元素开始通过DOM树进展

翻译：最近看起来很明显是祖先，而不是兄弟姐妹。

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

休息一下，拿一个套装。

Answer 5

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

最近的jquery不想工作

5 个答案: