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在div中具有id #videosContainer a data-video =＆＃34; youtube＆＃34;。

难点是根据另一个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
});

如果该值不是＆＃34; youtube＆＃34;，我不希望下面我在我的听众上定义的事件开始。这就是为什么我只需要定位其当前状态有data-attribute =＆＃34; youtube＆＃34;

数据的价值归属＆＃34;数据 - 视频＆＃39;可以是：

＆＃34; YouTube和＃34;
＆＃34; VIMEO＆＃34;
不存在：在这种情况下，并非数据视频=＆＃34;＆＃34;但 div内部没有数据视频（如果需要，我可以更改此行为以使data-video =＆＃34;＆＃34;）

如果可能的话，我宁愿找到一个实际的方法来使用jquery来定位元素，也就是说找到一种方法来定义区域，而不是每次都添加（在我的代码库中很多次）做一些条件（如果#videosContainer的数据视频等于＆＃34; youtube＆＃34;），则需要在$ clickableAreaForStateWithYoutube.on点击监听器内添加内容。

Answer 1

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

但是当您更改顺序时，为了使（可能非）存在的元素成为选择另一个的决定因素，现在可以使用adjacent或{{3} （哪一个取决于元素是否立即相互跟随，或者它们之间是否存在其他元素。

这里基于使用普通兄弟组合子之前的YT视频元素选择#content元素的基本方法是

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

Answer 2

选择器不正确，属性值需要在[]内，而内容不是具有此数据属性的元素的父级

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

包含vimeo以及使用逗号添加其他选择器

  var $clickableAreaForStateWithYoutube  = $('[data-video="youtube"], [data-video="vimeo"]');

或者你可以制作一组这样的值

var values = ["youtube", "vimeo"];
var $clickableAreaForStateWithYoutube = $('[data-video]');
$clickableAreaForStateWithYoutube.on('click', function(e) {
    var dataVideo = $(this).data( "video" );
    values.includes( dataVideo ) ? alert( "value correct" ) :  alert( "value incorrect" )
});

修改

如果要在点击data-video时选择#content元素，则

var $clickableAreaForStateWithYoutube = $('#content'); $clickableAreaForStateWithYoutube.on('click', function(e) { var $dataVideoEl = $(this).next("[data-video]"); if( $dataVideoEl.length > 0 ) //to check if the element exists { var dataVideo = $dataVideoEl.data( "video" ); values.includes( dataVideo ) ? alert( "value correct" ) : alert( "value incorrect" ) } });

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

2 个答案: