按鈕不起作用的簡單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

你是全光照g jquery，所以你不必重複自己。從按鈕刪除onclick和使用jQuery

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

做刪除您的色彩額外的哈希（＃）在CSS類活躍

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

和寫劇本

$(function() { 
    var buttons = $('button[id^="repeat"]'); 
    buttons.click(function() { 
     buttons.removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

jsfiddle

Answer 2

<button id="repeatSun" data-bind="checked: repeatSun" onclick="changeStyle(this)"><span> Sun </span></button> 

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

---

或者更好的方法是添加click event handlers與您的jQuery。

添加同一類所有按鈕和應用點擊事件處理的那類：

<button id="repeatSun" data-bind="checked: repeatSun" class="changestyle"><span> Sun </span></button> 

$(".changestyle").click(function(){ 
    $(".changestyle").removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 3

你使用jQuery，刪除內聯JS和做正確的方法：

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

FIDDLE

要切換活動狀態上的一個按鈕，在時間：

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

Answer 4

您需要傳遞按鈕。

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

而在HTML：

<button id="repeatSun" data-bind="checked: repeatSun" onclick="changeStyle(this)"><span> Sun </span></button> 

Answer 5

大約是這樣的內容：

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

http://jsfiddle.net/VUmza/26/

編輯：在一個時間只有一個按鈕。

http://jsfiddle.net/VUmza/39/

$("button").click(function() { 
    $("button").each(function() { 
     $(this).removeClass("active"); 
    }); 

    $(this).toggleClass('active'); 
}); 

Answer 6

試試這個：

<button id="repeatMon" class="clickable"><span> Mon </span></button> 

jQuery的內部的document.ready（）

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

DEMO