Jquery each class item and compare

Question

I have a bunch of Images with data Attributes like this:

<img class="overlay" data-filename="red" src="img1.png">
<img class="overlay" data-filename="yellow" src="img2.png">
<img data-filename="blue" src="img3.png">

Thus I have Buttons like this:

<button class="lbtn" style="background-Color:red">
<button class="lbtn" style="background-Color:yellow">
<button class="lbtn" style="background-Color:blue">

If I click on the button red the Images which do no contain the data-filename red shall have an opacity of 0.

so far I did this but it wont work:

$('.lbtn').click(function() {
 $(".overlay").each(function() {
     if($(this).data('filename') == $('.lbtn').attr('src') {
         $(this).css({ opacity: 0 });
     }
 });

});

Answer 1

1. use attribute selector with :not selector

attribute selector

Description: Selects elements that have the specified attribute, with any value.

:not selector

Description: Selects all elements that do not match the given selector.

 $('.lbtn').click(function() { var color = $(this).attr('style').split(":")[1] console.log(color) $('img:not([data-filename=' + color + '])').css({ opacity: 0 }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img class="overlay" data-filename="red" src="img1.png"> <img class="overlay" data-filename="yellow" src="img2.png"> <img data-filename="blue" src="img3.png"> <button class="lbtn" style="background-Color:red">Click</button> <button class="lbtn" style="background-Color:yellow">Click</button> <button class="lbtn" style="background-Color:blue">Click</button> 

Answer 2

To achieve this you can add a data attribute to the button elements which matches the data-filename on the img . You can then use this to filter() them and show/hide the relevant ones, something like this:

 $('.lbtn').click(function() { var filter = $(this).data('filter'); var $imgs = $('.container img').hide(); $imgs.filter('[data-filename="' + filter + '"]').show(); }); 

 .red { background-color: #C00; } .yellow { background-color: #CC0; } .blue { background-color: #00C; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <img class="overlay" data-filename="red" src="img1.png" title="red"> <img class="overlay" data-filename="yellow" src="img2.png" title="yellow"> <img data-filename="blue" src="img3.png" title="blue"> </div> <button class="lbtn red" data-filter="red">Red</button> <button class="lbtn yellow" data-filter="yellow">Yellow</button> <button class="lbtn blue" data-filter="blue">Blue</button> 

Answer 3

Would change your code a little:

$('.lbtn').click(function() {
 var self= $(this);
 $(".overlay").each(function() {
     if($(this).data('filename') == $(self).attr('src') {
         $(this).css({ opacity: 0 });
     }
 });

var self= $(this); //this is element, which fired event, and you need to remember id due to check. When you try to check $('.lbtn').attr('src') it takes all three buttons and doesn't works AND buttons need to have attribute src as well!