Question

我有这个清单：

<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的更改。

Answer 1

问题是选择器^=，即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');

Answer 2

您使用的是错误的属性选择器。

^表示开头，而您的class属性不表示。使用*表示'包含子字符串'。

你遇到的第二个问题是你的id比较仅使用2 ==这是JavaScript的弱比较。将此更改为3 ===，事情将开始起作用。

请参阅此JSFiddle：http://jsfiddle.net/bey3wpt2/

另见下文。

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

P.s我将var id移到顶部的唯一原因是满足JSLint。

Answer 3

这里，问题是选择器格式[attribute ^ =＆＃39; startingString＆＃39;]将返回属性以给定字符串开头的元素。

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

或使用* for，所有具有类属性值的元素包含单词＆＃34; category - ＆＃34;

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

3 个答案: