单击按钮时更改按钮颜色答案

【问题标题】：Change Button Color when click on the Button单击按钮时更改按钮颜色
【发布时间】：2017-05-26 10:36:05
【问题描述】：

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

$( "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>

它正在工作。但是在这里，当我单击每个按钮时，颜色已更改。我需要，当我点击一个按钮时，颜色应该只改变那个按钮，其余按钮颜色应该默认。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这样的？

$( "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>

【讨论】：

【解决方案2】：

您需要删除所有按钮上的选定类（这会清除先前选定按钮的样式），然后将其应用于单击的按钮。此外，按钮需要有唯一的 ID 或根本没有（这个功能的 clas 就足够了），你应该用 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>

【讨论】：

【解决方案3】：

试试这个 JQuery 代码

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

这样做的目的是，首先从每个按钮中删除.selected 类，然后将该类仅应用于已单击的按钮。

【讨论】：

【解决方案4】：

以上答案效果很好。但是如果您想在再次单击按钮时禁用该按钮，请参见下面的 sn-p

$( "button.change" ).click(function() {
  $(this).toggleClass( "selected" );
	$("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>

【讨论】：

【解决方案5】：

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

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

顺便说一句，您的代码运行良好，https://jsbin.com/sicifopizi/edit

【讨论】：