CODEWITHSUNDEEP
javascriptjquerymodal-dialog
Kyle
Kyle

Reputation: 33

How to fire a unique ID modal when multiple divs with class is clicked using jQuery?

Forgive the strangely worded question, my first StackOverflow post, and I'm a novice to jQuery/JS. I've used the search feature a lot and haven't found exactly what I'm looking for:

I am having an issue essentially, where I have dynamically added divs by the end-user (they pick how many content blocks they want to use), with the same class, that need to hide and show specific divs (with unique IDs) when they are clicked. I finally figured out how to give each div a unique ID, but I'm not sure how to get the child divs of the particular div what was clicked, to fire properly on click. Hope that makes sense.

Here is the HTML I have:

 <div class="resource-video">
     //Unique thumbnail
 </div>
 <div class="overlay-container hide" style="width: 50px; height: 50px;">
     <div class="video-player hide">
        //Included unique video
     </div>
 </div>

This will end up being duplicated based on how many videos are added.

Here is the JavaScript I am using:

//Generates unique IDs for each of the divs on the page with those classes
var i = 0;
$(".resource-video").each(function(i){
    $(this).attr("id","video_"+ (i+ 1) );
});
$(".overlay-container").each(function(i){
    $(this).attr("id","container_"+ (i+ 1) );
});
$(".video-player").each(function(i){
    $(this).attr("id","player_"+ (i+ 1) );
});

//Currently opens all of them
$(".resource-video").on("click", function(){
    openModal(".overlay-container", false, true);
    alert($(this).attr("id")); //Alerts the right div clicked
    if ($(".video-player").hasClass("hide")){
        $(".video-player").removeClass("hide").addClass("show");
        $(".overlay-container").animate({ height:'300px', width: '500px' }, "slow");
    }
    $("#overlay").on("click", function(){
        $(".video-player").removeClass("show").addClass("hide");
        $(".overlay-container").css({ "height":"50px", "width":"50px",  
         "display":"none"});
        $(this).hide();
    });
    return false;
});

// Probably not totally necessary, but just in case
function closeModals(){
   $("body").find(".modal").hide();
   $("#overlay").hide();
   $("body, html").removeClass("no-scroll");
};

function openModal(divID, allowScroll, blockScreen){
   closeModals();
   $(divID).show();
   if ( blockScreen == true ){ $("#overlay").show(); };
   if ( allowScroll == false ){ $("body, html").addClass("no-scroll"); };
};

As it stands now, all of the overlays open because I am targeting the class not the IDs. Basically, I need to find out a way to have the specific overlay associated with the specific div clicked on to display without hardcoding that, since the number of divs will change all the time. I would think I could use something like $(this) or event.target, but things I tried didn't work.

Hopefully I was clear enough with my issue and made it general enough for other people to use too. Thanks for any help in advance!

Upvotes: 0

Views: 871

Answers (1)

Barmar
Barmar

Reputation: 782488

This uses DOM traversal functions to find the corresponding DIVs to the one that was clicked.

$(".resource-video").on("click", function(){
    var overlayContainer = $(this).next();
    var videoPlayer = overlayContainer.children(".video-player");
    openModal(overlayContainer, false, true);
    if (videoPlayer.hasClass("hide")){
        videoPlayer.removeClass("hide").addClass("show");
        overlayContainer.animate({ height:'300px', width: '500px' }, "slow");
    }
    return false;
});

// Only need to bind this once, not every time .resource-video is clicked.
$("#overlay").on("click", function(){
    $(".video-player").removeClass("show").addClass("hide");
    $(".overlay-container").css({ "height":"50px", "width":"50px",  
     "display":"none"});
    $(this).hide();
});


// Probably not totally necessary, but just in case
function closeModals(){
   $(".modal").hide();
   $("#overlay").hide();
   $("body, html").removeClass("no-scroll");
};

function openModal(div, allowScroll, blockScreen){
   closeModals();
   div.show();
   if ( blockScreen == true ){ $("#overlay").show(); };
   if ( allowScroll == false ){ $("body, html").addClass("no-scroll"); };
};

Upvotes: 1

Related Questions