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

Переведено: Ближайшие, очевидно, получают предков, а не братьев и сестер.

ref: http://api.jquery.com/closest/

Сделай перерыв, имей кит-кат.