CODEWITHSUNDEEP
javascriptjquery
yanca
yanca

Reputation: 93

Check if element with data attribute equal to value exist

I have a huge problem with verification if among of elements is a one which has data attribute equal to another value.

The HTML code is like this:

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

The JS code is like this:

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

I'm dunno if I should replace all in

Upvotes: 1

Views: 1254

Answers (3)

matthias_h
matthias_h

Reputation: 11416

If you want to reset the class "foo" for other images if el2 exists and, if it not exists, the class "foo" should be in the last image which has the data-img attribute equal to el, you can do it like this:

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

Upvotes: 1

Hashemi Rafsan
Hashemi Rafsan

Reputation: 300

You can do something like this:

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

Hopefully, It will work.

Upvotes: 0

Nick
Nick

Reputation: 147166

You don't need to know whether the element exists; you can simply addClass to the result of the selector and if there are no matches to the selector nothing will happen. In the mouseleave part you removeClass from the same image:

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

Upvotes: 2

Related Questions