单击列表元素即可显示和隐藏div

Question

I have this list:

<ul class="filters">
      <li id="all">All</li>
      <li id="cat1">Cat1</li>
      <li id="cat2">cat2</li>
      <li id="cat3">cat3</li>
</ul>

<div class="col s12 m4 l3 category-cat1">
     <div class="card-panel grey lighten-5 z-depth-1">
       <div class="row">
          <div class="col s4">
            <img src="/static/images/cat124.jpg" alt="" class="circle responsive-img">
          </div>
          <div class="col s8">
             <span class="black-text">
                This is a square image. Add the "circle" class to it to make it appear circular.
             </span>
          </div>
        </div>
        <a href="/">View Details</a>
      </div>
</div>
....
....

And this JS code on the end of the page:

$('.filters li').click(function () {
        $('[class^=category-]').hide('fast','linear');
        var id = $(this).attr('id');
        if(id == 'all') {
             $('[class^=category-]').show('fast','linear');
        } else {
             $('.category-'+id).show('fast','linear');
        }
    });

I try to show and hide divs with the same category through the filters. I thought that it would be easy, but when I click on the <li> nothing happens. Neither an error on the console, nor a change on the divs.

Answer 1

The problem is the selector ^= , which is the attribute starts with selector , your class name attribute value does not starts with category- that is why it is not working.

Instead try attribute contains selector

$('[class*=category-]').hide('fast','linear');

But the right solution could be to add one more class to those div elements like category

<div class="col s12 m4 l3 category-cat1 category">
</div>

then use it

$('div.category').hide('fast','linear');

Answer 2

You are using the wrong attribute selector.

The ^ means begins with and your class attribute doesn't. Using * means 'Contains a substring'.

The second problem that you have is your id comparison uses only 2 == which is JavaScript is a weak comparison. Change this to 3 === and things will start to work.

See this JSFiddle: http://jsfiddle.net/bey3wpt2/

Also see below.

$('.filters li').click(function () {
    var id = $(this).attr('id');

    $('[class*=category-]').hide('fast', 'linear');

    if (id === 'all') {
        $('[class*=category-]').show('fast', 'linear');
    } else {
        $('.category-' + id).show('fast', 'linear');
    }
});

Ps The only reason I moved to the var id up to the top is to satisfy JSLint.

Answer 3

Here, the problem is given selector format [attribute^='startingString'] will return the element which attribute start with given string.

<div class="col s12 m4 l3 category-cat1"> // here, class start with "col" so no element will be select. So selector is need to change like below format.




  $("[class^='col']").hide('fast', 'linear');

//selector start with "col"

or use * for, all elements with a class attribute value containing the word "category-"