Question

I’m looking to change the class (hide) of certain div’s dependent on their attribute values.
Here’s my code, it might make a bit more sense once you’ve seen this:

jQuery('#menu1').click(function() {
      jQuery([.attr('imageref')]!=[.attr('menuref')]).removeClass('pics').addClass('.pics-hidden').removeClass('pics').fadeOut(200);
      jQuery('#projectimages').masonry('reload');
       });

So what I’m after is that if you click on #menu1 it will remove .pics with the same imageref attribute as the #menu1 atrribute menuref.

So clicking on #menu1 which has menuref equal to 1, will hide the relevant .pics with an imageref also equal to 1.
Hopefully that makes sense, any help would be greatly appreciated!

Answer 1

You use the attribute-equals selector, and concatenate into the selector the value of the menuref attribute.

jQuery('#menu1').click(function() {
      var menu = $(this).attr('menuref');
      jQuery(".pics[imageref='" + menu + "']").toggleClass('pics pics-hidden')
                                              .fadeOut(200);
      jQuery('#projectimages').masonry('reload');
});