Question

我有一堆id为btn1，btn2，btn3等的按钮，我想在单击一个按钮时更改背景，例如，如果按下btn1，它会变黑，但是当按下btn2时会变黑并且btn1回到原来的状态。

＆＃13;

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

＆＃13;

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

＆＃13;

This code on JSFiddle

Answer 1

点击button循环显示所有按钮后，将backgroundColor设置为#222并将点击的backgroundColor设置为其他按钮。

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

的 Updated Fiddle

＆＃13;
＆＃13;
// 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' } }
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

创建一个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');
}

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

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

2 个答案: