检测是否按下了另一个按钮

Detect if another button is pressed

本文关键字：另一个 按钮 是否 检测      更新时间：2023-09-26
我有一堆 id 为 btn1、btn2、btn3 等的按钮，我想在单击一个按钮时更改背景，例如，如果按下 BTN1，它会变黑，

但当按下 BTN2 时它会变黑，btn1 会恢复到原始状态。

body {
  background-color: #fff;
  font-size: 62.5%;
}
#background-buttons { text-align: right; }
#background-buttons button {
  background-color: #222;
  font-family: Roboto Condensed;
  color: #fff;
  padding: 10px;
  outline: none;
  border:  none;
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
#background-buttons #activated { background-color: #000; }
#background-buttons button:hover { background-color: #555; }
#background-buttons button:active { background-color: #333; }
    <div id="background-buttons">
    <button id="btn1" onclick="change()">1</button>
    <button id="btn2" onclick="change()">2</button>
    <button id="btn3" onclick="change()">3</button>
    <button id="btn4" onclick="change()">4</button>
    <button id="btn5" onclick="change()">5</button>
    <button id="btn6" onclick="change()">6</button>
    <button id="btn7" onclick="change()">7</button>
    <button id="btn8" onclick="change()">8</button>
    <button id="btn9" onclick="change()">9</button>
    <button id="btn10" onclick="change()">10</button>
  </div>

JSFiddle 上的这段代码

单击button时，循环遍历所有按钮，将其backgroundColor设置为 #222，并将单击的按钮的backgroundColor设置为其他按钮。

另外，在调用函数 change() 时的标记中，传递一个参数this，即 change(this) 。

更新的小提琴 

// el is the button that was clicked
function change(el) {
  var all = document.getElementsByTagName('button');
  // loop through all buttons
  for (i = 0; i < all.length; i++) {
    // if the current button is the one that was clicked change its color to 'plum', else '#222'
    all[i].style.backgroundColor = all[i] == el ? 'plum' : '#222'
  }
}
body {
  background-color: #fff;
  font-size: 62.5%;
}
#background-buttons {
  text-align: right;
}
#background-buttons button {
  background-color: #222;
  font-family: Roboto Condensed;
  color: #fff;
  padding: 10px;
  outline: none;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
#background-buttons button:hover {
  background-color: #555 !important;
}
<div id="background-buttons">
  <button id="btn1" onclick="change(this)">1</button>
  <button id="btn2" onclick="change(this)">2</button>
  <button id="btn3" onclick="change(this)">3</button>
  <button id="btn4" onclick="change(this)">4</button>
  <button id="btn5" onclick="change(this)">5</button>
  <button id="btn6" onclick="change(this)">6</button>
  <button id="btn7" onclick="change(this)">7</button>
  <button id="btn8" onclick="change(this)">8</button>
  <button id="btn9" onclick="change(this)">9</button>
  <button id="btn10" onclick="change(this)">10</button>
</div>

创建一个 CSS 类以适当地设置所选按钮的样式：

.selectedButton {
  background-color: black;
}

创建一些库函数来添加和删除类：

var util = {dom:{}};
util.dom.hasClassName = function(el, cName) {
    if (typeof el == 'string') el = document.getElementById(el);
    var re = new RegExp('(^|''s+)' + cName + '(''s+|$)');
    return el && re.test(el.className);
}
util.dom.addClassName = function(el, cName) {
    if (typeof el == 'string') el = document.getElementById(el);
    if (!util.dom.hasClassName(el, cName)) {
        el.className = util.trim(el.className + ' ' + cName);
    }
}
util.dom.removeClassName = function(el, cName) {
    if (typeof el == 'string') el = document.getElementById(el);
    if (util.dom.hasClassName(el, cName)) {
        var re = new RegExp('(^|''s+)' + cName + '(''s+|$)','g');
        el.className = util.trim(el.className.replace(re, ''));
    }
}

/* Remove leading and trailing whitespace and reduce
** multiple intermediate whitespaces to a single space
*/
util.trim = function(s) {
  return s.replace(/(^'s+)|('s+$)/g,'').replace(/'s+/g,' ');
}

更改侦听器，以便它们传递对单击按钮的引用：

<button id="btn1" onclick="change(this)">1</button>

现在，当单击按钮时，您可以执行以下操作：

function change(target) {
    var el = document.querySelector('button.selectedButton');
    if (el) util.dom.removeClassName(el, 'selectedButton');
    util.dom.addClassName(target, 'selectedButton');
}

最好将单个侦听器放在父元素上，并使用相关事件的目标属性来查找单击的按钮。此外，您可以记住添加类的最后一个按钮，这样下次就不必搜索它。但是，如果您在服务器上设置选定的按钮，这将不起作用。

相关文章：