4

我在页面上重复了一个带有 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 交互......有什么想法吗？

4

5 回答 5

7

closest寻找祖先，而不是兄弟姐妹；此外，您的选择器在开头缺少 a .（您告诉它寻找一个vuQuestionBubble元素，您实际上是指div带有“vuQuestionBubble”类的 a ）。

使用您当前的结构，您可以使用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”的 divimg作为兄弟，即使它不是紧挨着 的那个img，因此如果标记发生轻微变化，您的代码就不太容易受到维护问题的影响。

于 2011-03-07T12:04:46.327 回答
4

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

于 2011-03-07T12:00:38.983 回答
1

vuQuestionBubble是一个类

$(this).closest('vuQuestionBubble').show();
=>
$(this).closest('.vuQuestionBubble').show();
于 2011-03-07T12:02:41.400 回答
0

描述：获取第一个匹配选择器的祖先元素，从当前元素开始，向上遍历 DOM 树

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

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

休息一下，吃个kit-kat。

于 2011-03-07T12:01:50.590 回答
0

closest遍历祖先元素，所以试试siblings('vuQuestionBubble')

于 2011-03-07T12:03:42.753 回答