用于更改按钮状态的 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27271440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript for changing button states
提问by rob
This is what I am looking for:
这就是我要找的：
How to keep button active after press with jQuery
I want four buttons and at only one time one button is active.
我想要四个按钮，并且一次只有一个按钮处于活动状态。
For example if button one is pressed the others are not shown active and vice versa for the other buttons.
例如，如果按下按钮之一，则其他按钮不会显示为活动状态，反之亦然。
回答by Thiago Negri
In case you are looking for a pure JavaScript solution (i.e.no extra dependencies with jQuery, Bootstrap, etc), you can do it like this.
如果您正在寻找纯 JavaScript 解决方案（即与 jQuery、Bootstrap 等没有额外依赖项），您可以这样做。
First, group your HTML buttons in a common parent so you can iterate over them, for example:
首先，将您的 HTML 按钮分组在一个共同的父级中，以便您可以对其进行迭代，例如：
<div id="buttonGroup">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
Then, in JavaScript, you can "initialize" the divby setting handlers for the click events of the buttons:
然后，在 JavaScript 中，您可以div通过为按钮的点击事件设置处理程序来“初始化” ：
function initButtonGroup(parentId) {
var buttonGroup = document.getElementById(parentId),
i = 0,
len = buttonGroup.childNodes.length,
button;
handleButtonGroupClick = initClickHandler(parentId);
for (; i < len; i += 1) {
button = buttonGroup.childNodes[i];
if (button.nodeName === 'BUTTON') {
button.addEventListener('click', handleButtonGroupClick);
}
}
}
Then you need to write the behavior you want in the handler of click events, in this example I'm just changing the classes to get a visual feedback of which one is active:
然后你需要在点击事件的处理程序中编写你想要的行为，在这个例子中，我只是改变了类来获得哪个处于活动状态的视觉反馈：
function initClickHandler(parentId) {
return function(e) {
var buttonGroup = document.getElementById(parentId),
i = 0,
len = buttonGroup.childNodes.length,
button;
e.preventDefault();
for (; i < len; i += 1) {
button = buttonGroup.childNodes[i];
if (button.nodeName === 'BUTTON') {
button.className = '';
}
}
e.target.className = 'active';
};
}
Then, you can call your initializer function to initialize your "component":
然后，您可以调用初始化函数来初始化您的“组件”：
initButtonGroup('buttonGroup');
I've setup a JSFiddle for this example, take a look: http://jsfiddle.net/et75ftca/
我已经为这个例子设置了一个 JSFiddle，看看：http: //jsfiddle.net/et75ftca/
If performance is really important to you, this code may be optimized by using a single click event handler in the entire divelement and filtering events that are not targetted at a button.
如果性能对您来说真的很重要，则可以通过在整个div元素中使用单击事件处理程序并过滤不针对button.
回答by Roi
Hope this helps you:
希望这对你有帮助：
HTML
HTML
<button id='1' class="btn">1</button>
<button id='2' class="btn">2</button>
<button id='3' class="btn">3</button>
<button id='4' class="btn">4</button>
CSS
CSS
.actv {
background: red;
}
JS
JS
$(".btn").click(function() {
$(document).find(".btn").removeClass("actv");
$(this).addClass("actv");
});
回答by delCano
Assuming you have the code in your link:
假设您的链接中有代码：
$('.uiButton').click(function() {
$(this).toggleClass("active");
});
It would be as easy as writing:
这将像编写一样简单：
$('.uiButton').click(function() {
$('.uiButton').removeClass("active");
$(this).addClass("active");
});
回答by visualfanatic
HTML:
HTML：
<button class="btn">One</button>
<button class="btn">Two</button>
<button class="btn">Three</button>
CSS:
CSS：
.btn {
border: 0;
outline: 0;
display: inline-block;
background-color: #ddd;
border-radius: 3px;
padding: 10px 12px;
}
.btn.active {
background-color: #000;
color: #fff;
}
JS (jQuery):
JS（jQuery）：
$(function() {
$('.btn').on('click', function(e) {
$('.btn.active').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
});
