最近的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有一个样式显示:默认为none.当点击'prodQuestionMark'时,我希望它旁边的vuQuestionBubble显示.我把这个代码放在底部.

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

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

它似乎不起作用... click事件正在工作,我可以用.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,所以使你的代码维护问题不太敏感,如果标记稍有变化.