Javascript 更改按钮组的类别

我有三个按钮，每个按钮都有一个CSS类。单击其中一个元素时，我想删除该类并仅为单击的元素添加一个新的CSS类。此外，我需要一直按下所选按钮。 我搜索了一些示例，发现可以这样做：

$(".class").removeClass("choice").addClass("active");

这适用于所有按钮，但不仅仅适用于一个按钮。我试图改变这一点

$(this).removeClass("choice").addClass("active");

但这不起作用

我做了一把小提琴来做更多的压缩：

编辑 当我第二次按下时，我需要同样的行为

对不起，基本的问题

提前谢谢

---

关于

我已经更新了您的JSFIDLE以获得一个有效的解决方案：

下面是javascript部分：

$(function() {
    $("button").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
    });
});

---

您可以改为使用以下代码

$(".class").click(function(){
    $(".class").addClass("choice");
    $(".class").removeClass("active");
    $(this).removeClass("choice").addClass("active");
});

---

在这里，仅从单击的类中删除“选项”类。其他人没有。另外，active“类也被添加到单击的类中。

您可以在

按钮
标记中使用
change（this）
，并在
change（）
函数中引用该元素，如下所示。
添加单击事件时：-

<button id="hourly" class="choice" onclick="change()">Orario</button>

或者，更改事件并传入此
：-

<button id="hourly" class="choice" onclick="change(this)">Orario</button>

或者更好：-

$('.choice').click(function(e){
    e.preventDefault();
    $(this).removeClass("choice").addClass("active");
});

并删除内联单击事件。

功能更改（事件）{
event.preventDefault（）；
//$（“.choice”）.removeClass（“choice”）.addClass（“active”）；
$（event.target）.removeClass（“选择”）.addClass（“活动”）；
}

时刻表
乔尔纳利耶罗
男子汉
是否可以选择多个项目作为活动项？
如果没有，请签出以下内容：

标记

<div>
  <button id="hourly" class="choice">Orario</button>
</div>

<div>
  <button id="daily" class="choice">Giornaliero</button>
</div>

<div>
  <button id="monthly" class="choice">Mensile</button>
</div>

JS

.active { 
    background-color: #A60076;
    color: #FF0000;
}

.choice {
  background-color: #000000;
    color: #FFFFFF;
}

$(document).ready(function() {
  $('button').click(function(e) {
    $("button").addClass('choice').removeClass('active');
    $(this).removeClass('choice').addClass('active');
  });
});

这是一个上面代码正常工作的示例。
删除
e.preventDefault（）
检查感谢重播，但我需要一直按下所选按钮。无论如何，它不起作用。您只需将行更改为$（this）；并在CSS表中切换这两种样式的顺序。现在，因为“选择”在“活动”之后，所以无论按钮是否处于活动状态，它始终优先。请注意，这似乎起作用的唯一原因是您有“f”而不是“关闭”；在其中一个CSS样式中。但是，如果你在CSS中切换样式的顺序，它也会起作用。修复了CSS样式中的结束分号。然后就有了一个毫无意义的互联网点。虽然我觉得有趣的是，对于一个问题，有七个答案可以通过快速更改CSS和编辑一行代码来解决：谢谢重播。没关系，但是如果我想在第二次按下时有相同的行为，我该怎么办？你说的相同行为是什么意思？此脚本会切换类
活动
，以便在第二次按下按钮时，该按钮再次变为非活动状态。
.active { 
    background-color: #A60076;
    color: #FF0000;
}

.choice {
  background-color: #000000;
    color: #FFFFFF;
}

$(document).ready(function() {
  $('button').click(function(e) {
    $("button").addClass('choice').removeClass('active');
    $(this).removeClass('choice').addClass('active');
  });
});