检查数据属性等于值的元素是否存在

Question

我有一个巨大的验证问题，如果元素中的一个是具有数据属性等于另一个值的元素。

HTML 代码如下所示：

<ul class="menu">

<li data-img="1">Demo</li>

<li data-img="2">Demo</li>

<li data-img="3">Demo</li>

<li data-img="4">Demo</li>

</ul>

<div class="banners">

<img src="........." data-img="1"/>

<img src="........." data-img="2"/>

<img src="........." data-img="4"/>

</div>

JS代码是这样的：

$('.menu li').each(function(){

$(this).hover(function(){

var el = $(this).attr('data-img');

var el2 = $('.banners').find('[data-img=' + el + ']'); 

// or maybe it should be: 

var el2 = $('.banners').attr('data-img');

// Here I would like to check if el2 equals to el exists add to this element (el2) the class name "foo"

}, function(){

});

});

我是邓诺，如果我应该替换所有

Answer 1

您不需要知道该元素是否存在;您可以简单地找到选择器的结果，如果与选择器不匹配，则不会发生任何事情。在来自同一图像的零件中：addClassmouseleaveremoveClass$('.menu li').each(function() {&nbsp; $(this).hover(function() {&nbsp; &nbsp; &nbsp; var el = $(this).attr('data-img');&nbsp; &nbsp; &nbsp; $('.banners').find('[data-img=' + el + ']').addClass('foo');&nbsp; &nbsp; },&nbsp; &nbsp; function() {&nbsp; &nbsp; &nbsp; var el = $(this).attr('data-img');&nbsp; &nbsp; &nbsp; $('.banners').find('[data-img=' + el + ']').removeClass('foo');&nbsp; &nbsp; });});img {&nbsp; opacity: 0.3;}.foo {&nbsp; opacity: 1.0;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul class="menu">&nbsp; <li data-img="1">Demo</li>&nbsp; <li data-img="2">Demo</li>&nbsp; <li data-img="3">Demo</li>&nbsp; <li data-img="4">Demo</li></ul><div class="banners">&nbsp; <img src="https://via.placeholder.com/150/0000FF" data-img="1" />&nbsp; <img src="https://via.placeholder.com/150/00FF00" data-img="2" />&nbsp; <img src="https://via.placeholder.com/150/FF0000" data-img="4" /></div>

Answer 2

如果要重置其他图像的类“foo”（如果 el2 存在），如果不存在，则类 “foo” 应位于属性等于 el 的最后一个图像中，则可以这样操作：data-img$('.menu li').each(function() {&nbsp; $(this).hover(function() {&nbsp; &nbsp; &nbsp; var el = $(this).attr('data-img');&nbsp; &nbsp; &nbsp; var el2 = $('.banners').find('[data-img=' + el + ']');&nbsp; &nbsp; &nbsp; if (el2.length) {&nbsp; &nbsp; &nbsp; &nbsp; let images = $('.banners img');&nbsp; &nbsp; &nbsp; &nbsp; images.each(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).removeClass('foo');&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; el2.addClass('foo');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; function() {});});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul class="menu">&nbsp; <li data-img="1">Demo</li>&nbsp; <li data-img="2">Demo</li>&nbsp; <li data-img="3">Demo</li>&nbsp; <li data-img="4">Demo</li>&nbsp; <li data-img="5">Demo</li></ul><div class="banners">&nbsp; <img src="https://dummyimage.com/100x100/000/fff" data-img="1" />&nbsp; <img src="https://dummyimage.com/100x100/000/fff" data-img="2" />&nbsp; <img src="https://dummyimage.com/100x100/000/fff" data-img="3" />&nbsp; <img src="https://dummyimage.com/100x100/000/fff" data-img="4" /></div>

Answer 3

你可以做这样的事情：$('.menu li').each(function(){&nbsp; $(this).hover(function(){&nbsp; &nbsp; &nbsp;let img = $(this).data('img');&nbsp; &nbsp; &nbsp;let bannerImg = $('.banners').find(`img[data-img="${img}"]`);&nbsp; &nbsp; &nbsp;if (bannerImg.length) {&nbsp; &nbsp; &nbsp; &nbsp;bannerImg.addClass('foo');&nbsp; &nbsp; &nbsp;}&nbsp; }, function() {&nbsp; &nbsp; &nbsp;let img = $(this).data('img');&nbsp; &nbsp; &nbsp;let bannerImg = $('.banners').find(`img[data-img="${img}"]`);&nbsp; &nbsp; &nbsp;if (bannerImg.length) {&nbsp; &nbsp; &nbsp; &nbsp;bannerImg.removeClass('foo');&nbsp; &nbsp; &nbsp;}&nbsp; });});希望它会起作用。