javascript - 按钮上的简单 onclick 功能不起作用

Question

我试图在单击按钮时更改按钮的类。为什么我的不工作: 看我的fiddle

HTML:

<button id="repeatMon" onclick="changeStyle()"><span> Mon </span></button> 
<br/>
<button id="repeatTues" data-bind="checked: repeatTues" onclick="changeStyle()"><span> Tues </span></button> 
<br/>
<button id="repeatWeds" data-bind="checked: repeatWeds" onclick="changeStyle()"><span> Weds </span></button> 
<br/>
<button id="repeatThurs" data-bind="checked: repeatThurs" onclick="changeStyle()"><span> Thurs </span></button> 
<br/>
<button id="repeatFri" data-bind="checked: repeatFri" onclick="changeStyle()"><span> Fri </span></button> 
<br/>
<button id="repeatSat" data-bind="checked: repeatSat" onclick="changeStyle()"><span> Sat </span></button> 
<br/>
<button id="repeatSun" data-bind="checked: repeatSun" onclick="changeStyle()"><span> Sun </span></button> 
<br/>

CSS:

button{
    width: 60px;
    height: 35px;
    border-radius: 0px;
    color: #cfcfcf;
    background: #0a4a58;
}

.active{
    color: #fff;
    background: ##02AEFF;
}

jQuery:

function changeStyle(){
    $(this).toggleClass('active');
}

谢谢!

Answer 1

你正在使用 jQuery，删除内联 JS 并以正确的方式进行:

$('[id^="repeat"]').on('click', function() {
    $(this).toggleClass('active');
});

FIDDLE

同时切换一个按钮的事件状态:

$('[id^="repeat"]').on('click', function() {
    $(this).toggleClass('active').siblings().removeClass('active');
});