javascript - 清除并添加新类别？

Question

我有这样的列表:

<ul id="portfolio-filter">
  <li><a class=".tab1" data-filter=".Design" dir="ltr" href="#">Design</a></li>
  <li><a class=".tab2" data-filter=".Tech" dir="ltr" href="#">Technology</a></li>
</ul>
<ul id="portfolio-list">
   <li style='opacity:1'>Content</li>
   <li style='opacity:1'>Content</li>
   <li style='opacity:1'>Content</li>
   <li style='opacity:1'>Content</li>
   <li style='opacity:0'>Content</li>
   <li style='opacity:0'>Content</li>
   <li style='opacity:0'>Content</li>
</ul>

我使用 Jquery 添加类 (MYCLASS)，其中 li 的 opacity = 1 如下(在页面加载时运行):

 //Add class if opacity
    $('#portfolio-list li').map(function() {
        if($(this).css('opacity') != '0')
          $(this).addClass("MYCLASS");
      });

但是当我使用点击功能时(它将以另一个顺序改变每个的不透明度)，例如:

<ul id="portfolio-list">
   <li style='opacity:0'>Content</li>
   <li style='opacity:0'>Content</li>
   <li style='opacity:1'>Content</li>
   <li style='opacity:1'>Content</li>
   <li style='opacity:1'>Content</li>
   <li style='opacity:3'>Content</li>
   <li style='opacity:1'>Content</li>
</ul>

我想重新添加 onclick 类，我使用了:

$filter.find('a').click(function (e) {
    //Run filter
    $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
    //Add class
    $('#portfolio-list li').map(function() {
       if($(this).css('opacity') != '0') {
         $(this).addClass("MYCLASS");
       } else {
         $(this).removeClass("MYCLASS");
       }
    ); 
}

但它无法正确运行。

大家可以帮帮我吗？谢谢。

Answer 1

我尝试了你的代码，看来它对我有用。我用过each()循环遍历 #portfolio-list li 中的所有 li 标签，并应用一些我理解问题的 css 类。

$(function(){
  $('#portfolio-list li').each(function(){
    if($(this).css('opacity') == 1){
      $(this).addClass("MYCLASS");
    }      
  });  
});

这里正在工作 Demo.

您正在使用map()这在工作中看起来相同但有区别，See Here.