更改按钮的类组

Question

我有三个按钮，每个按钮都有一个CSS类。 在其中之一单击时，我想删除该类并仅为clicked元素添加一个新的CSS类。 此外，我需要按住选择的按钮。 我搜索了一些示例，发现可以执行以下操作：

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

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

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

但这没用。

我为更多的解释而摆弄： https ://jsfiddle.net/90u6b3tj/3/

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

很抱歉出现基本问题。

提前致谢

问候

Answer 1

我已经为您的jsfiddle更新了一个可行的解决方案：

https://jsfiddle.net/90u6b3tj/10/

这是JavaScript部分：

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

Answer 2

在添加点击事件时，如下所示：-

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

您可以使用event.target

function change(){
  event.preventDefault();
  $(event.target).removeClass("choice").addClass("active");
}

或者，改变你的活动，并通过在this ： -

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

所以你可以做：-

function change(element){
  event.preventDefault();
  $(element).removeClass("choice").addClass("active");
}

还是更好：-

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

并删除嵌入式点击事件。

Answer 3

您可以改用以下代码。

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

在这里，“ 选择 ”类仅从单击的类中删除。 不是来自其他人。 还将“ 活动 ”类添加到单击的类中。

Answer 4

您可以在button标记中使用change(this)并在change()函数中引用该元素，如该小提琴所示。

Answer 5

 function change(event){ event.preventDefault(); //$(".choice").removeClass("choice").addClass("active"); $(event.target).removeClass("choice").addClass("active"); } 

 <div> <button id="hourly" class="choice" onclick="change(event)">Orario</button> </div> <div> <button id="daily" class="choice" onclick="change(event)">Giornaliero</button> </div> <div> <button id="monthly" class="choice" onclick="change(event)">Mensile</button> </div> 

Answer 6

是否应该这样选择一个以上的项目作为活动项目？ 如果没有，请检查以下内容：

标记

<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>

CSS

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

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

JS

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

这是上面的代码正常工作的示例小提琴 。