Question

有条件地向元素添加类的最佳实践方法是什么？一个选项是if语句，然后添加该类。另一种选择是添加类或将空字符串添加为类。也许有更好的选择？是的，我知道速度可能并不重要，但我只是想知道“专业”的做法。

var addClass=1; //or 0
var row=$('#cloneElement')
  .clone(false)
  .removeClass('gone')
  .removeAttr('id')
  .attr('data-id',this.id);

if (addClass) {
  row.addClass('newClass');
}

var addClass=1; //or 0
var row=$('#cloneElement')
  .clone(false)
  .removeClass('gone')
  .removeAttr('id')
  .attr('data-id',this.id)
  .addClass(addClass?'newClass':'');

Answer 1

在我看来，第一个版本更好。可能条件对于页面的正确操作至关重要，最好使其非常清晰明确，而不是使其过于模糊。

关于专业代码最重要的一点是它应该是可读，无论是你的同事还是你几个月之后。

所以我建议，如果有疑问，请避开“聪明”的解决方案，而是选择最明显，最简单的解决方案，不需要任何额外的评论来解释它。

Answer 2

如果您使用的是jquery ui，可以使用toggleClass

row.toggleClass('newClass', addClass)

Answer 3

您建议的任何一种方法都可以使用。

这是一种替代方法，允许您根据条件值链接多个函数：

var addClass=1; //or 0
var row=$('#cloneElement')
    .clone(false)
    .removeClass('gone')
    .removeAttr('id')
    .attr('data-id',this.id)
    .filter( function(){ return addClass === 1; })
    .addClass('newClass')
    .end();

Answer 4

这是一个简单的函数，它将通过传递类名和布尔值来有条件地添加/删除类

jQuery.fn.applyClass = function(className,apply){
  if( apply ){
    $(this).addClass(className);
  } else {
    $(this).removeClass(className);
  }
  return this;
};

这比在切换之前可能不知道状态的情况下使用toggleClass更好。

一个例子，假设您想在向下滚动200px时显示导航栏

$(window).on('scroll',function(e){
    var top = $(window).scrollTop;
    $('.navbar').applyClass('show', ( top >= 200 ));
});

使用jQuery有条件地添加类

4 个答案: