更改类按钮组

我有三个按钮，每个按钮都有一个CSS类。点击其中的一个，我想要移除该类，并为点击元素添加一个新的CSS类。此外，我需要继续按下选定的按钮。我搜索了一些例子，我发现这是可能做这样的事情：更改类按钮组

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

这适用于所有的按钮，但不是唯一的一个。我试图改变这在

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

但这没有奏效。

我做更多的compreansion小提琴：https://jsfiddle.net/90u6b3tj/3/

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

很抱歉的基本问题。

在此先感谢

问候

来源

2016-03-08 Giordano

删除'e.preventDefault（）' –

检查https://jsfiddle.net/90u6b3tj/8/ –

感谢您的重播，但我需要保持按下所选按钮。无论如何它dosn't工作 – Giordano

我已经更新您的jsfiddle一个有效的解决方案：

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

这里的JavaScript部分：

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

来源

2016-03-08 11:58:40 Artifex404

请注意，这似乎工作的唯一原因是你有'f'而不是关闭;在其中一种CSS样式中。但是，如果您切换CSS中样式的顺序，它也可以工作。 –

修复了CSS样式中的结尾分号。 – Artifex404

然后有一个没有意义的互联网点。虽然我确实觉得有趣的是，有七个答案可以通过快速CSS更改和编辑一行代码来解决问题。：P –

你可以请改用以下代码。

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

这里，“选择”类只从点击的类中删除。不是来自其他人。此外，“活动”类被添加到被点击的类。

来源

2016-03-08 11:58:51

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

来源

2016-03-08 11:59:49 Aer0

为您添加您的单击事件，如下所示： -

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

你可以使用event.target： -

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

OR，改变你的活动，并通过在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"); 
});

和删除内联click事件。

来源

2016-03-08 12:00:06 BenG

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>

来源

2016-03-08 12:00:23 saikumar

-1

如果有可能因此选择多个项目的活跃？如果不是，结账此：

标记

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

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

下面是一个样本fiddle与上面的代码工作。

来源

2016-03-08 12:10:17 kaito

更改类按钮组

回答

相关问题