javascript - Jquery - 事件监听点击另一个 div 具有特定数据属性的页面上的 div 目标

Question

如果当前页面有，当这个 div 有某个 id 时，我无法定位一个 div

<div id="global">    

   <div id="videosContainer" data-has-video="1" data-video= "youtube">
    <iframes here> and some content
   </div>  

    <div id="content"> </div>

</div>

我需要监听页面上#content 区域的点击，页面的当前状态/DOM 包含在 id #videosContainer a data-video = "youtube"的 div 中。

困难在于根据另一个 div(DOm 中的相同级别 = #global 的后代)是否具有特定数据属性来定位区域。

 var $clickableAreaForStateWithYoutube  = $('#content #videosContainer[data-video] = "youtube"');

$clickableAreaForStateWithYoutube.on('click', function(e) {
        alert("a click was performed while a youtube video was playing")
        resetTimer("timer");
        //do stuff
});

如果该值不是“youtube”，我不希望我在下面的监听器上定义的事件启动。这就是为什么我只需要定位当前状态为 data-attribute="youtube"

数据属性“data-video”的值可以是:

• “YouTube”

• “vimeo”

• 不存在:在这种情况下，不是有 data-video=""，而是div 中没有数据视频(如果需要，我可以更改此行为有 data-video="")

如果可能的话，我宁愿找到一种使用 jquery 定位元素的实际方法，也就是说找到一种定义区域的方法，而不是每次都添加(我的代码库中有很多次)做一些条件(在 $clickableAreaForStateWithYoutube.on click listener a if#videosContainer has data-video equal to "youtube"中添加的内容)

Answer 1

最初使用您问题中提供的 DOM 结构是不可能的 - 原因是 CSS 只能选择“向下”或“向右”，而不能选择向上/向左。 (另见 Is there a CSS parent selector? )

但是，当您更改顺序时，其(可能不存在)是选择另一个元素的决定因素的元素现在出现在那个元素之前，您可以使用 adjacent或 general sibling combinator (哪一个取决于元素是否紧跟在彼此后面，或者它们之间是否有其他元素。

根据使用一般兄弟组合器出现在它之前的 YT-video 元素，在这里选择 #content 元素的基本方法是

[data-video="youtube"] ~ #content