单击按钮时更改按钮颜色

我的页面中有一行中有很多按钮。当我点击按钮时，我需要改变按钮的颜色。下面是我的示例代码单击按钮时更改按钮颜色

$("button.change").click(function() { 
 
    $(this).toggleClass("selected"); 
 
});

.Button { 
 
    font-family: Calibri, sans-serif; 
 
    font-size:13px; 
 
    font-weight: bold; 
 
    width: 160px; 
 
    height: 25px; 
 
    background:grey; 
 
    color: white 
 
} 
 
.selected { 
 
    color: white; 
 
    background:green 
 
} 
 
button#cssColorChange:active{ 
 
    color: white; 
 
    background:red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button>

这是工作。但是当我点击每个按钮时，颜色已经改变。我需要，当我点击一个按钮时，颜色应该仅针对该按钮进行更改，其余按钮颜色应该默认设置。

来源

2017-05-26 Melbin Mathai

您需要删除所有按钮上的所选班级（清除之前所选按钮的样式），然后将其应用于点击的按钮。此外，按钮需要具有唯一的ID或根本没有（这些功能足够了），并且您应该使用CSS将按钮分隔开，而不是使用双行换行符。

$("button.change").click(function() { 
 
    $(".change").removeClass('selected'); 
 
    $(this).addClass("selected"); 
 
});

.Button { 
 
    font-family: Calibri, sans-serif; 
 
    font-size:13px; 
 
    font-weight: bold; 
 
    width: 160px; 
 
    height: 25px; 
 
    background:grey; 
 
    color: white; 
 
    display:block; 
 
    margin: 1em; 
 
} 
 
.selected { 
 
    color: white; 
 
    background:green 
 
} 
 
button#cssColorChange:active{ 
 
    color: white; 
 
    background:red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<button class="Button change">Click to change color</button> 
 
<button class="Button change">Click to change color</button> 
 
<button class="Button change" >Click to change color</button> 
 
<button class="Button change">Click to change color</button>

来源

2017-05-26 10:37:43 gavgrif

试试这个jQuery代码，而不是

$("button.change").click(function() { 
    $('button').removeClass("selected"); 
    $(this).toggleClass("selected"); 
});

这样做是什么，首先从每一个按钮即可删除.selected类，然后在类仅适用于已被点击的按钮。

来源

2017-05-26 10:38:13 Anubhav

是这样的吗？

$("button.change").click(function() { 
 
    $("button.change.selected").removeClass("selected"); 
 
    $(this).toggleClass("selected"); 
 
});

.Button { 
 
    font-family: Calibri, sans-serif; 
 
    font-size:13px; 
 
    font-weight: bold; 
 
    width: 160px; 
 
    height: 25px; 
 
    background:grey; 
 
    color: white 
 
} 
 
.selected { 
 
    color: white; 
 
    background:green 
 
} 
 
button#cssColorChange:active{ 
 
    color: white; 
 
    background:red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="jQueryColorChange">Click to change color</button>

所有的

来源

2017-05-26 10:40:56 Andrew

-1

首先，请不要使用相同的ID的多个元素。 Id应该是唯一的。

$('button.change').click(function() { 
    $(this).toggleClass('selected'); 
})

你的代码工作正常顺便说一句，https://jsbin.com/sicifopizi/edit

来源

2017-05-26 10:46:24

上述答案的工作非常好。但如果你想关闭，当你再次点击它的按钮，见下面的代码片段

$("button.change").click(function() { 
 
    $(this).toggleClass("selected"); 
 
\t $("button.selected").not(this).removeClass("selected") 
 
});

.Button { 
 
    font-family: Calibri, sans-serif; 
 
    font-size:13px; 
 
    font-weight: bold; 
 
    width: 160px; 
 
    height: 25px; 
 
    background:grey; 
 
    color: white 
 
} 
 
.selected { 
 
    color: white; 
 
    background:green 
 
} 
 
button#cssColorChange:active{ 
 
    color: white; 
 
    background:red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="Button change" id="">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="">Click to change color</button> 
 
<br><br> 
 
<button class="Button change" id="">Click to change color</button>

来源

2017-05-26 10:48:55

单击按钮时更改按钮颜色

回答

相关问题