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

simple onclick function on button not working

本文关键字：功能 不起作用 onclick 简单 按钮      更新时间：2023-09-26

我试图在点击按钮时更改按钮的类别。为什么我的按钮不起作用：看看我的小提琴

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

谢谢！

您使用的是jQuery，删除内联JS并使用正确的方法：

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

FIDDLE

要一次在一个按钮上切换活动状态：

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

<button id="repeatSun" data-bind="checked: repeatSun" onclick="changeStyle(this)"><span> Sun </span></button> 
function changeStyle(btn){
    $(btn).toggleClass('active');
}

或者，一个更好的方法是在jQuery中添加点击事件处理程序。

将相同的类添加到所有按钮中，并对该类应用点击事件处理程序：

<button id="repeatSun" data-bind="checked: repeatSun" class="changestyle"><span> Sun </span></button>
$(".changestyle").click(function(){
   $(".changestyle").removeClass('active');
   $(this).addClass('active');
});

您正在使用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

您需要传递该按钮。

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

在HTML中：

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

试试这个：

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

Jquery内部document.ready（）

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

演示

这样的东西怎么样：

$("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');
});
相关文章：