Попытка пройти DOM, чтобы уникальное видео проигрывалось при нажатии на определенный div

Итак, у меня есть требование для динамически генерируемых блоков контента на странице. Эти блоки имеют миниатюру, и при щелчке по ней следует открыть модальное окно и отобразить уникальное окно наложения, а также уникальное связанное видео.

Я пытаюсь написать некоторый универсальный JavaScript, который будет правильно проходить по дереву DOM, чтобы при щелчке по любой конкретной миниатюре открывалось модальное окно, соответствующее наложение и соответствующее видео.

Вот пример того, что у меня сейчас (есть много из них, динамически добавленных):

<div class="block">
    <div class="thumbnail">
        //Thumbnail image
    </div>
    <p>Video Description</p>
    <div class="window hide">
        <div class="video hide">
            //Video content
        </div>
    </div>
</div>
<div id="modal" class="hide"></div>

и после попытки сделать кучу разных вещей, я закончил тем, что пытался сделать что-то подобное для JavaScript, который не работает:

$(".thumbnail").on("click",function(){
     $("#modal").removeClass("hide").addClass("show");
     $(this).closest(".window").removeClass("hide").addClass("show");
     $(this).closest(".video").removeClass("hide").addClass("show");
});

CSS очень прост:

.hide { display: none; }
.show { display: block; }

Попытка сделать функцию щелчка универсальной, насколько это возможно, чтобы она работала с любым.thumbnail, который был нажат. Я также поменял find(". Window") и children(". Window"), но ничего не происходит. Есть идеи, что я делаю не так? Спасибо!

Источник

3 ответа

Решение

В зависимости от того, что вы на самом деле хотите, чтобы ваш classЯ бы использовал этот код:

$(".thumbnail").on("click", function () {
    var $block = $(this).closest(".block");
    $block.find(".window, .video").add("#modal").removeClass("hide").addClass("show");
});

ДЕМО: http://jsfiddle.net/gLMSF/ (используя другой, но похожий код)

На самом деле он находит нужные элементы, основанные на .thumbnail, Находит его содержащий .block элемент, затем смотрит на его потомков, чтобы найти .window а также .video элементы.

Если вы действительно хотите включить . в ваших атрибутах вы должны экранировать их для выбора jQuery.

Что касается стиля, вы, вероятно, должны просто иметь стиль display: block; по умолчанию, а затем переключите hide учебный класс. Это меньше работы, и логичнее.

Источник

У вас огромная проблема с именами классов в HTML:

<div class=".block">

так должно быть

<div class="block">

Ваш модал - единственный, у которого класс правильно назван. Ваши обходы DOM не будут работать, потому что они ищут "блок", но он называется ".block"

Так что исправьте все это, и вы должны добиться большего успеха:

<div class="block">
    <div class="thumbnail">
        //Thumbnail image
    </div>
    <p>Video Description</p>
    <div class="window hide">
        <div class="video hide">
            //Video content
        </div>
    </div>
</div>
<div id="modal" class="hide"></div>
Источник

Ваш код не будет работать, потому что у ваших селекторов есть периоды (.) в ваших классах, если это действительно то, что вы хотите, вы должны попробовать это так:

$(".\\.thumbnail").on("click",function(){
     $("#modal").removeClass("hide").addClass("show");
     $(this).closest("\\.window").removeClass("hide").addClass("show");
     $(this).closest("\\.video").removeClass("hide").addClass("show");
});

В противном случае просто попробуйте удалить периоды из классов...

Кроме того, вы используете .closest() неправильно, так как он смотрит через предков в дереве DOM...

Вы должны изменить свой код на:

$(".\\.thumbnail").on("click",function(){
     $(this).next("\\.window").children(".video")
            .addBack().add("#modal").removeClass("hide").addClass("show");
});
Источник
Другие вопросы по тегам