更好的方式来点击添加/删除类

当你点击它们改变一些内容（“#live”）和（“#paid”）的可见性时，我有两个链接，“.sp”和“.sl”我猜想一个低级别的标签界面。如果有，请在点击时添加一个“有效”类别，并移除其他链接上的课程。对于这样一个小功能，这似乎有点臃肿，有没有更好的方法来写这个？更好的方式来点击添加/删除类

$(function() { 
    $('#live').hide(); 
    $('.sp').click(function() { 
     $(this).addClass('active'); 
     $('#paid').show(); 
     $('#live').hide(); 
     $('.sl').removeClass('active'); 
    }); 
    $('.sl').click(function() { 
     $(this).addClass('active') 
      $('#live').show(); 
      $('#paid').hide(); 
      $('.sp').removeClass('active'); 
    }); 
});

来源

2012-02-01 Dirty Bird Design

我会建议一个实用功能，可以为你做共同的工作，被称为两个地方。

$(function() { 
    function clickCommon(current, newItem, oldItem, deactive) { 
     $(current).addClass('active'); 
     $(newItem).show(); 
     $(oldItem).hide(); 
     $(deactive).removeClass('active');  
    } 

    $('#live').hide(); 
    $('.sp').click(function() { 
     clickCommon(this, "#paid", "#live", ".sl"); 
    }); 
    $('.sl').click(function() { 
     clickCommon(this, "#live", "#paid", ".sp"); 
    }); 
});

来源

2012-02-01 04:13:56 jfriend00

刚刚看到这个，它比上面的那个好吗？似乎有点多一点工作？ – 2012-02-01 04:15:11

这是一个你喜欢的个人喜好。我认为这是几行代码，但是如果你不仅仅只有.sp和.sl参与逻辑，那么它会更直接一些，并且可以稍微扩展一些。要么在实践中运作良好。我常常想当人们使用这些匿名函数时，他们往往忘记了通用代码可以被分解成一个通用函数并在多个地方使用，所以我认为值得分享这个选项。 – jfriend00 2012-02-01 04:19:58

非常好的一点，在最后重新使用代码是更有效的，即使我不得不多写一点。谢谢！ – 2012-02-01 04:22:49

试试这个。

$(function() { 
    $('#live').hide(); 
    var $links = $('.sp, .sl').click(function() { 
     $links.removeClass('active'); 
     var isSp = $(this).addClass('active').hasClass('sp'); 
     $('#paid').toggle(isSp); 
     $('#live').toggle(!isSp); 
    }); 
});

来源

2012-02-01 04:06:09 ShankarSangoli

+1，同样的思维过程。 – 2012-02-01 04:07:25

@ShankarSangoli今天两次。你很不好的屁股。 Thx再次男人。 – 2012-02-01 04:13:46

更好的方式来点击添加/删除类

回答

相关问题