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

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() {

  $(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

如果要重置其他图像的类“foo”（如果 el2 存在），如果不存在，则类 “foo” 应位于属性等于 el 的最后一个图像中，则可以这样操作：data-img

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

     }

  });

});

希望它会起作用。