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 имеет стиль отображения: по умолчанию нет. когда нажата кнопка "prodQuestionMark", я хочу, чтобы рядом с ней отображался пузырь vuQuestionBubble. Я положил этот код внизу.

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

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

кажется, что это не работает... событие click работает, и я могу выбрать родительский div с помощью.parent, но не могу взаимодействовать с ближайшим div... есть идеи?

Answer 1

closest ищет предков, а не братьев и сестер; Кроме того, ваш селектор отсутствует . в начале (вы говорите, чтобы искать vuQuestionBubble элемент, где вы действительно имеете в виду div с классом "vuQuestionBubble").

С вашей текущей структурой вы можете использовать next потому что div с "vuQuestionBubble" является следующим элементом. Однако, если вы когда-нибудь измените свою структуру и поместите что-то между ними, 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();
    });
});

Это найдет первый div с классом "vuQuestionBubble", который следует за 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/

Есть перерыв, есть кит кат.