你将如何编写这个将点击的元素绑定到 JavaScript 中的函数的 jQuery 代码？

Question

我一直在尝试解决如何使用 JavaScript 将点击的元素绑定到函数的问题，经过很多天终于找到了@JerdineSabio 提供的解决方案here。我最初的问题是在Stackoverflow 提出的，它与处理许多按钮和执行语音识别的单个 JavaScript 脚本有关。将单击的按钮绑定到函数的代码是用 jQuery 编写的，涉及使用 function(e) 。 jQuery 语句接受 3 个参数，但在 JS 中，等效表达式只接受两个参数（事件（例如点击）和函数）。我查找了我所依赖的常用参考资料，但还没有找到用 Javascript 编写它的方法。我已经解决了脚本问题；所以我只想找到这个问题的答案，以防我将来只想使用 JS，因为我倾向于依赖 JS 而不是 jQuery，而且我之前也阅读过关于 function(e) 的内容并观看了关于Youtube 关于它，但我仍然不太明白“e”是什么以及它的作用。
下面的 jQuery 脚本可以正常工作。该代码更改了它旁边的按钮的颜色。同样，这涉及多个按钮，但它们只有一个脚本。

我试过了：

document.addEventListener("click", myFunction); 
function myFunction(e) {
this.previousElementSibling.setAttribute("style", "background-color: gold") ...
....};

我又尝试了一些东西，但无论我尝试什么，我都无法使该功能正常工作。

HTML 是：

 <div class="container">
  <button id="first" type="button" class="btn btn-danger"></button>
  <button id="first" type="button" class="btn btn-warning"></button>
  </div>

jQuery 是：

 $(document).ready(function(){
     $(document).on("click", "#first", function(e) {
        $(this).siblings().css("background-color", "gold");
        });
  }); 

Answer 1

您可以通过向按钮添加 onclick 函数然后通过 id 或类名定位它们来实现多种方式

首先是 id（ofc 必须有唯一的 id）然后你要放:-

        function btnClicked(clicked_btn) {
            let btn = document.getElementById(clicked_btn)
            btn.style.backgroundColor = 'red'
        }

    <div class="container">
        <button id="first" onClick='btnClicked(this.id)' type="button" class="vtn btn-danger">press1</button>
        <button id="second" onClick='btnClicked(this.id)' type="button" class="btn btn-warning">press2</button>
    </div>

第二个类名：- 但是你有多个类名，所以我们要添加 split() 函数来定位其中一个，像这样

        function btnClicked(clicked_btn) {
            let btn = document.querySelector('.' + (clicked_btn.split(' ')[1]))
            btn.style.backgroundColor = 'red'
        }

    <div class="container">
        <button id="first" onClick='btnClicked(this.className)' type="button" class="btn btn-danger">press1</button>
        <button id="second" onClick='btnClicked(this.className)' type="button" class="btn btn-warning">press2</button>
    </div>

Answer 2

你可以试试这个方法：

<script>
    window.addEventListener('load', () => {
        var buttons= document.querySelectorAll('#first');
        for (var i = 0; i < buttons.length; i++)
            buttons[i].addEventListener("click", myFunction);
    });

    function myFunction(e) {
        siblings(e.target).forEach((element, index) => {
            element.setAttribute("style", "background-color: gold")
        });
    };

    function siblings(elem) {
        let siblings = [];
        if (!elem.parentNode)
            return siblings;
        let sibling = elem.parentNode.firstElementChild;
        do {
            if (sibling != elem)
                siblings.push(sibling);
        } while (sibling = sibling.nextElementSibling);
        return siblings;
    };

</script>

Answer 3

基本的事件委托要求您必须弄清楚点击的是您要查找的元素。使用matches() 让这一切变得简单。

function delegatedClick(selector, callback) {
  function fnc(event) {
    if (event.target.matches(selector)) {
      callback.call(event.target, event);
    }
  }
  document.addEventListener("click", fnc);
}

delegatedClick(".foo button", function() {
  console.log(this.id);
});

.foo button {
  color: green;
}

<div class="foo">
  <button type="button" id="b1">Yes</button>
</div>
<div class="foo">
  <button type="button" id="b2">Yes</button>
</div>
<div class="bar">
  <button type="button" id="b3">No</button>
</div>
<div class="foo">
  <button type="button" id="b4">Yes</button>
</div>

现在切换兄弟姐妹

var wrapper = document.querySelector(".foo");
var buttons = wrapper.querySelectorAll("button")
wrapper.addEventListener("click", function (event) {
  var clickedButton = event.target.closest("button");
  clickedButton.classList.remove("goldbg");
  buttons.forEach(function (btn) {
    if (btn !== clickedButton) {
       btn.classList.add("goldbg"); 
    }
  });
});

.foo button.goldbg {
  background-color: gold;
}

<div class="foo">
  <button type="button" id="b1">1</button>
  <button type="button" id="b2">2</button>
  <button type="button" id="b3">3</button>
  <button type="button" id="b4">4</button>
</div>