Question

我想更改单击按钮的类而不是特定的。

不是我想要的：

$('#buttonid').addClass('active')

我想抓住被点击按钮的上下文并自动为其添加一个类，无论点击了哪个按钮。

理想情况下，我想要一个我分配给每个按钮的onClick函数的情况，它将仅为具有该函数的按钮更改类（以及其他内容）。

类似的东西：

伪代码

onClick function() {
  thisButton.addClass('active')
}

Answer 1

您可以将事件侦听器添加到包含按钮的元素中。处理函数将接收click事件，该事件将包含指向触发事件的元素的target适当性。您可以比较e.target以确保您拥有所需的元素。（我在我的代码段中使用了dataset）

var container = document.getElementById("container");

container.addEventListener('click', function(e) {
  var target = e.target;
  if (target.dataset.action == 'click') {
    target.classList.toggle('clicked');
  }
})

button.clicked {
  background-color: gold;
}

<div id="container">
  <button data-action="click">Click Me</button>
  <button data-action="click">Click Me</button>
  <button data-action="click">Click Me</button>
  <button>Nothing Will Happen</button>
  <button data-action="click">Click Me</button>
  <button data-action="click">Click Me</button>
</div>

注意：该代码段适用于IE9 +，旧版浏览器有polyfill。

Answer 2

您需要观察DOM更改。这个简短的示例使用MutationObserver()对象：

（注意：我不知道你的意思是什么'具体'按钮。）

var body = document.getElementsByTagName('body')[0];
var buttons = [];




/**
 * When a button is clicked
 */
function buttonClickEvent() {
    this.className = this.className === 'active' ? '' : 'active';
}



/**
 * Iterate each button in the 'buttons' {Array}.
     * if callback returns false, the loop breaks.
 */
function filterButtons(callback) {
    for (var i = 0, btn; (btn = buttons[i++]) && (callback(btn) !== false););
}



/**
 * Update buttons in certain collections.
 * @param {HTMLCollection, else ...} addedNodes
 * @param {HTMLCollection, else ...} removedNodes
 * @param {Boolean} ignoreBtnCheck
 */
function updateButtons(addedNodes, removedNodes, ignoreBtnCheck) {
    for (var i = 0, el; el = addedNodes[i++];) {
        if (ignoreBtnCheck || el.tagName.toUpperCase() === 'BUTTON') {
            var found = false;

            filterButtons(function(btn) {
                if (btn === el) {
                    found = true;
                    return false;
                }
            });

            if (!found) {
                el.addEventListener('click', buttonClickEvent);
                buttons.push(el);
            }
        }
    }

    for (i = 0; el = removedNodes[i++];) {
        if (el.tagName.toUpperCase() === 'BUTTON') {
            filterButtons(function(btn) {
                if (btn === el) {
                    buttons.splice(i, 1);
                    return false;
                }
            });
        }
    }

}




/**
 * Create a 'MutationObserver' to handle
 events like DOMInsertedNode, etc.
 */
var observer = new MutationObserver(function(mutations, observer) {
    if (mutations[0].addedNodes.length || mutations[0].removedNodes.length)
        updateButtons(mutations[0].addedNodes, mutations[0].removedNodes);
});




/**
 * Observe DOM changes in 'body'.
 */
observer.observe(body, { childList: true, subtree: true });




/**
 * Update at least once each button in 'body'
 */
updateButtons(body.getElementsByTagName('button'), [], true);

Answer 3

您可以使用for..of循环，document.querySelectorAll() Element.addEventListener，event.target来引用当前点击的元素

＆＃13;

.selected {
  color: green;
}

＆＃13;

<button>click</button>
<button>click</button>
<button>click</button>
<button>click</button>
<script>
  for (let button of document.querySelectorAll("button")) {
    button.addEventListener("click", e => e.target.classList.add("selected"))
  }
</script>

＆＃13;

如何更改我刚刚点击的按钮类而不具体？

3 个答案: