0

请原谅措辞奇怪的问题，我的第一篇 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 之类的东西，但是我尝试过的东西没有用。

希望我对我的问题足够清楚，并使其足够通用以供其他人使用。提前感谢您的帮助！

4

1 回答 1

1

这使用 DOM 遍历函数来查找与被单击的 DIV 对应的 DIV。

$(".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"); };
};
于 2013-06-27T20:31:30.777 回答