Question

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

＆＃13;

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

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

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

Answer 1

您需要删除所有按钮上的选定类（清除先前所选按钮的样式），然后将其应用于单击的按钮。此外，按钮需要具有唯一的ID或者根本不需要（clas足以满足此功能），您应该使用CSS而不是双线换行来分隔按钮。

＆＃13;

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

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

Answer 2

这样的东西？

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

Answer 3

尝试使用此JQuery代码

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

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

Answer 4

以上答案工作得非常好。但如果您想再次点击它时禁用该按钮，请参阅下面的代码段

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

Answer 5

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

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

您的代码工作正常，https://jsbin.com/sicifopizi/edit

单击按钮时更改按钮颜色

5 个答案: