Trying to traverse the DOM so unique video will play when certain div is clicked

Question

So, I have a requirement for dynamically generated content blocks on a page. These blocks have a thumbnail and when it is clicked, it should open a modal, and display an unique overlay window, as well as as the unique associated video.

I am trying to write some generic JavaScript that will traverse the DOM tree properly, so that when any particular thumbnail is clicked, a modal, the associated overlay, and the associated video will open.

Here is an example of what I have now (there are many of these, dynamically added):

<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>

and after attempting to do a bunch of different things, I ended up trying to do something like this for the JavaScript, which doesn't work:

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

CSS is very basic:

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

Trying to make the click function generic as possible so it would work on any .thumbnail that was clicked. I've also interchanged find(".window") and children(".window") but nothing happens. Any ideas on what I'm doing wrong? Thanks!

Answer 1

Depending on what you actually want your classes to be, I'd use this code:

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

DEMO: http://jsfiddle.net/gLMSF/ (using different, yet similar code)

It actually finds the right elements, based on the clicked .thumbnail. It finds its containing .block element, then looks at its descendants to find the .window and .video elements.

If you actually want to include . in your attributes, you need to escape them for jQuery selection.

As for styling, you should probably just have the styling be display: block; by default, and then toggle the hide class. It's less work, and makes more sense logically.

Answer 2

You have a huge issue with your class names in HTML:

<div class=".block">

it should be

<div class="block">

Your modal is the only one that has the class properly named. Your DOM traversals will not work because they are looking for "block" but it's called ".block"

So fix it all to this and you should find more success:

<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>

Answer 3

Your code won't work because your selectors have periods (.) in your classes if that's actually what you want, you should try it like this:

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

Otherwise just try removing the periods from the classes...

Also, you're using .closest() incorrectly, as it looks up through ancestors in the DOM tree...

You should change your code to:

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