Javascript 如何将按钮切换为活动和非活动jquery

我有3个按钮，如果我按下按钮1，它应该改变颜色（我添加了一些类），它也应该充当切换功能，如果我单击按钮2（当按钮1处于活动状态时），按钮1应该不再处于活动状态，按钮2开始处于活动状态，依此类推。。我试着写一些代码，但似乎不起作用，下面是我的代码

$（'.btn'）。在（“单击”，函数（）上）{
if（$（this）.hasClass（“价格过滤器活动”））{
$（此）.removeClass（“价格过滤器激活”）；
}否则{
$（此）.addClass（“价格过滤器激活”）；
}
})

.price过滤器容器{
宽度：1190px；
最大宽度：100%；
保证金：0自动；
}
.价格过滤器处于活动状态{
背景#42B549；
颜色：白色；
}
.价格过滤器处于活动状态：悬停{
背景#42B549；
颜色：白色；
}

按钮1
按钮2
按钮3

要实现这一点，您只需对任何包含要添加的类的元素调用

removeClass（）

。您还可以使用

toggleClass（）

简化切换类的逻辑，如下所示：

$（'.btn'）。在（“单击”，函数（）上）{
$（'.price-filter-active'）。不是（this.removeClass（'price-filter-active'）；
$（this.toggleClass（'price-filter-active'）；
})

.price过滤器容器{
宽度：1190px；
最大宽度：100%；
保证金：0自动；
}
.价格过滤器处于活动状态{
背景#42B549；
颜色：白色；
}
.价格过滤器处于活动状态：悬停{
背景#42B549；
颜色：白色；
}
按钮{
大纲：0；/*仅用于删除此演示中难看的蓝色大纲*/
}

按钮1
按钮2
按钮3

使用

.toggleClass（）

删除和添加类的步骤

$（'.btn'）。在（“单击”，函数（）上）{
$（'.btn.price-filter-active'）.toggleClass（'price-filter-active'））
$（this）.toggleClass（“价格过滤器活动”）
})

.price过滤器容器{
宽度：1190px；
最大宽度：100%；
保证金：0自动；
}
.价格过滤器处于活动状态{
背景#42B549；
颜色：白色；
}
.价格过滤器处于活动状态：悬停{
背景#42B549；
颜色：白色；
}

按钮1
按钮2
按钮3

尝试以下方法：

$（'.btn'）。在（“单击”，函数（）上）{
$（'.btn.price filter active'）.removeClass（“price filter active”）；
$（此）.addClass（“价格过滤器激活”）；
})

.price过滤器容器{
宽度：1190px；
最大宽度：100%；
保证金：0自动；
}
.价格过滤器处于活动状态{
背景#42B549；
颜色：白色；
}
.价格过滤器处于活动状态：悬停{
背景#42B549；
颜色：白色；
}

按钮1
按钮2
按钮3

您只需修改代码即可完成此操作：只需从所有

.btn

中删除激活的类

价格过滤器，然后将其添加到if语句后半部分的press one中即可

$('.btn').click(function() {
  if ($(this).hasClass("price-filter-active")) {
    $(this).removeClass("price-filter-active");
  } else {
    $('.btn').removeClass("price-filter-active");
    $(this).addClass("price-filter-active");
  }
});


$（'.btn'）。单击（函数（）{
if（$（this）.hasClass（“价格过滤器活动”））{
$（此）.removeClass（“价格过滤器激活”）；
}否则{
$（'.btn'）.removeClass（“价格过滤器活动”）；
$（此）.addClass（“价格过滤器激活”）；
}
});
.price过滤器容器{
宽度：1190px；
最大宽度：100%；
保证金：0自动；
}
.价格过滤器处于活动状态{
背景#42B549；
颜色：白色；
}
.价格过滤器处于活动状态：悬停{
背景#42B549；
颜色：白色；
}

按钮1
按钮2
按钮3
您可以先从所有按钮中删除
.price filter active
类，然后将其添加到单击事件处理程序上的单击按钮中

$(document).ready(function(){
  $('.btn').on("click", function(){
        $('.btn').removeClass("price-filter-active");
        $(this).addClass("price-filter-active");
  })
});

请在使用jQuery的世界上最简单的事情中查看

$('.btn').on("click", function(e){
$( event.target ).addClass("price-filter-active");
  $('.btn').not(this).removeClass("price-filter-active");

})

使用event.target而不是此。确保在jQuery对象中包装event.target，这样就可以开始了

您可以在这里使用this或event.target，这无关紧要，我只是展示了这两个概念，event.target和this并不总是相同的

因此jQuery有一个惊人的not（）方法，而且它是可链接的

这里是链接


$（文档）.ready（函数（）{
$（“.btn”）。单击（函数（）{
$（“.btn”）.removeClass（“btn1”）；
$（此）.addClass（“btn1”）
});
});
.btn1{
背景#42B549；
颜色：白色；
}

按钮1
按钮2
按钮3
您可以使用
this
而不是
event.target
（无论如何，它应该是
e.target
）是的，从语法上讲，event.target更有意义，但不是（这）只是看起来比不（$（event.target））更好。如果您认为该更改对于将来的引用是强制性的，请告诉我。好的，但是该示例不起作用。要使其工作，请将
函数（e）
更改为
函数（事件）
或将
事件.target更改为
e.target