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

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

您可以执行以下操作：

$('.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');
     }
  });
});

希望它会起作用。

Answer 3

[如果要在其他图像上重设class“ foo”，如果el2存在，并且如果不存在，则“ 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>