Question

我有三个按钮，每个按钮都有一个CSS类。点击其中一个，我想删除该类，并仅为点击的元素添加一个新的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");
});

此处，＆＃34; 选择＆＃34; class仅从单击的类中删除。不是来自其他人。还有＆＃34; 有效＆＃34; class被添加到单击的那个。

Answer 4

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

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

这是一个示例fiddle，其中包含上述代码。

更改按钮的类组

6 个答案: