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

编程问答 2022-05-29

问题描述

我一直在尝试解决如何使用 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");
        });
  });

解决方法

您可以通过向按钮添加 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>

,

你可以试试这个：

Animal
,

基本的事件委托要求您必须弄清楚点击的是您要查找的元素。使用 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>
{{1}}

htmljavascriptjquery