простая функция 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/

EDIT: Только одна кнопка на время.

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