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

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

你不需要知道元素是否存在;你可以简单地addClass选择器的结果，如果选择器没有匹配项，什么都不会发生。在mouseleave部分中，您从同一图像removeClass：

$('.menu li').each(function() {
$(this).hover(function() {
var el = $(this).attr('data-img');
$('.banners').find('[data-img=' + el + ']').addClass('foo');
},
function() {
var el = $(this).attr('data-img');
$('.banners').find('[data-img=' + el + ']').removeClass('foo');
});
});

img {
opacity: 0.3;
}
.foo {
opacity: 1.0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="https://via.placeholder.com/150/0000FF" data-img="1" />
<img src="https://via.placeholder.com/150/00FF00" data-img="2" />
<img src="https://via.placeholder.com/150/FF0000" data-img="4" />
</div>

Answer 2

如果要在 el2 存在的情况下为其他图像重置类 "foo"，如果不存在，则类 "foo" 应该位于最后一个具有data-img属性等于 el 的图像中，您可以这样做：

$('.menu li').each(function() {
$(this).hover(function() {
var el = $(this).attr('data-img');
var el2 = $('.banners').find('[data-img=' + el + ']');
if (el2.length) {
let images = $('.banners img');
images.each(function() {
$(this).removeClass('foo');
});
el2.addClass('foo');
}
},
function() {});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<li data-img="5">Demo</li>
</ul>
<div class="banners">
<img src="https://dummyimage.com/100x100/000/fff" data-img="1" />
<img src="https://dummyimage.com/100x100/000/fff" data-img="2" />
<img src="https://dummyimage.com/100x100/000/fff" data-img="3" />
<img src="https://dummyimage.com/100x100/000/fff" data-img="4" />
</div>

Answer 3

你可以做这样的事情：

$('.menu li').each(function(){
$(this).hover(function(){
let img = $(this).data('img');
let bannerImg = $('.banners').find(`img[data-img="${img}"]`);
if (bannerImg.length) {
bannerImg.addClass('foo');
}
}, function() {
let img = $(this).data('img');
let bannerImg = $('.banners').find(`img[data-img="${img}"]`);
if (bannerImg.length) {
bannerImg.removeClass('foo');
}
});
});

希望它会起作用。