Javascript 使用jQuery有条件地添加类

将类有条件地添加到元素的最佳实践方法是什么？一个选项是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':'');

---

你建议的任何一种方法都会奏效

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

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();

---

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

---

在我看来，第一个版本更好。可能这个条件对于页面的正确操作是至关重要的，最好让它非常清楚和明确，不要让它太模糊

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

---

因此，我建议，当有疑问时，避免使用“聪明”的解决方案，而是选择最明显、最简单且不需要任何额外注释的解决方案。

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

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 ));
});

---

这两者是等价的。确保你始终坚持一个在两周内对你和同事都有意义的解决方案。@bagonyi。我同意坚持一种解决方案，因此为什么我会问这个问题，这样我就可以解决一个问题。IMHO，坚持用流畅的界面来构建对象会使代码更清晰。这就是方法链接的目标。但是，重载方法可能会成为条件运算符的更明确、可读的替代方法

.addClass（function（）{var newClass；if（addClass==1）{newClass=“newClass”}return newClass | |'''.}）

这一切实际上取决于个人偏好和团队风格。这些都不是特别模糊的。IMHO链接框架应该有

.addClass（…，condition）

方法。。。因为很多时候我们在链码里面有条件。API开发者注意到了。我从未使用过

filter（）

或

end（）

，但可能应该开始使用so@user1032531-请不要。使用filter和end的代码更难解析。关注代码的可读性，而不是用最少的按键来解决问题。谢谢bagonyi。我确实使用jQueryUI，但是如果存在另一个解决方案，通常会拒绝使用这些方法。如果

addClass

为

false

，并且元素已经有

newClass

类，则这将删除它-这不是所要求的功能。@MT0向toggleClass添加开关将根据

switch

分别为true或false

。toggleClass（className，state）状态类型：Boolean一个布尔值（不仅仅是truthy/falsy），用于确定是否应添加或删除类。

@Hussam OP的问题是：如果toggle为true，则添加该类（如果该类尚未存在）或者，如果切换为false，则不执行任何操作-在任何情况下，他们都不会删除该类（如果该类存在）。

toggleClass（）

函数将删除该类-这不是OP要求的。@MT0，我猜OP的意图是在OP的最后一行

.addClass（addClass？'newClass'：''）中添加/删除该类将添加新类或空字符串，但可能他没有完全表达这一点。
$(window).on('scroll',function(e){
    var top = $(window).scrollTop;
    $('.navbar').applyClass('show', ( top >= 200 ));
});