javascript - クラスを持つ複数のdivがjQueryを使用してクリックされたときに一意のIDモーダルを起動する方法は?

Question

私の最初の StackOverflow 投稿である奇妙な言葉遣いの質問を許してください。私は jQuery/JS の初心者です。検索機能を何度も使用しましたが、探しているものが正確に見つかりませんでした:

私は基本的に問題を抱えています。エンドユーザーが動的に div を追加し (使用するコンテンツ ブロックの数を選択します)、同じクラスで、特定の div (一意の ID を持つ) を非表示および表示する必要がある場合にそれらはクリックされます。最終的に、各 div に一意の ID を与える方法を見つけましたが、クリックされた特定の div の子 div を取得して、クリック時に適切に起動する方法がわかりません。それが理にかなっていることを願っています。

ここに私が持っているHTMLがあります:

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

これは、追加されたビデオの数に基づいて複製されます。

私が使用しているJavaScriptは次のとおりです。

//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"); };
};

現状では、ID ではなくクラスをターゲットにしているため、すべてのオーバーレイが開きます。基本的に、特定の div に関連付けられた特定のオーバーレイをクリックして、ハードコーディングせずに表示する方法を見つける必要があります。これは、div の数が常に変化するためです。$(this) や event.target のようなものを使用できると思いますが、試してみましたがうまくいきませんでした。

うまくいけば、私は自分の問題を十分に明確にし、他の人も使用できるように一般化しました. 事前に助けてくれてありがとう！