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 like（在页面加载时运行）：

 //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()遍历li中的所有#portfolio-list li标记，并应用了一些css类，因为我理解了这个问题。

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

此处正在运作Demo.

您使用的map()在工作中看起来相同，但存在差异，See Here.

Answer 2

尝试更改n＃34; map＆＃34;功能到每个功能

$('#portfolio-list li').each(function() {

清除并添加新课程？

2 个答案: