我有这个清单:

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


而此JS代码在页面的末尾:

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


我尝试通过过滤器显示和隐藏具有相同类别的div。我以为那会很容易,但是当我单击<li>时,什么也没有发生。控制台上没有错误,也没有div上的更改。

最佳答案

问题是选择器^=,即attribute starts with selector,您的类名属性值不是以category-开头的,这就是为什么它不起作用的原因。

而是try属性包含选择器

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


但是正确的解决方案可能是在div元素(例如category)中添加一个类

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


然后用它

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

09-25 16:55
查看更多