Question

我是否有办法按下目标按钮，只会影响该按钮，无论他们是否拥有相同的班级名称且我不想按下目标

按钮和附加到该类名称的事件在所有这些上执行我只想在每个按钮上独立地执行该目标按钮的事件，而不是在所有这些按钮上执行一个按钮。我想知道如何在纯粹的Javascript中执行。

这是我的代码

＆＃13;

<script>
  document.addEventListener('DOMContentLoaded', function(){
    var allButtons= document.getElementsByClassName('x');
    
  for(var i= 0; i< allButtons.length; i++){
allButtons[i].addEventListener('click', fx);
  }
    
    function fx(){
      for(var i1= 0; i1< allButtons.length; i1++){
        allButtons[i1].style.backgroundColor = 'red';
      }
    }
    
  });
</script>
<button class='x'>Execute</button>
<button class='x'>Execute</button>
<button class='x'>Execute</button>
<button class='x'>Execute</button>

＆＃13;

Answer 1

试试这个。使用document.addEventListener('DOMContentLoaded', function() { var allButtons = document.getElementsByClassName('x'); var len = allButtons.length; while(len--) { allButtons[len].onclick = function() { this.style.backgroundColor = 'red'; }; } });作为当前目标。

<button class='x'>Execute</button>
<button class='x'>Execute</button>
<button class='x'>Execute</button>
<button class='x'>Execute</button>

import sys
from PIL import Image, ImageEnhance, ImageFilter

def sample():
    img = Image.open("C:\\python\\images4.jpg")
    img.show(img)

Answer 2

您需要检测单击的元素（目标元素），而不是循环遍历所有按钮并应用样式。

document.addEventListener('DOMContentLoaded', function(){
  var allButtons= document.getElementsByClassName('x');

  for(var i= 0; i< allButtons.length; i++){
    allButtons[i].addEventListener('click', fx);
  }
  //e refer the element that is clicked
  function fx(e){
    var target = e.target || e.srcElement;
    target.style.backgroundColor = 'red';
  }

});

<button class='x'>Execute</button>
<button class='x'>Execute</button>
<button class='x'>Execute</button>
<button class='x'>Execute</button>

Answer 3

非常感谢你们每一个人，但我必须给@CodeLover提供最佳答案率我真的很喜欢你的第一个代码示例。但是你改变了......我知道你这样做是为了让我更好地帮助我，我很感激，但是你早期的第一个代码示例符合我的风格。

<script>
document.addEventListener('DOMContentLoaded', function() {
  var allButtons = document.getElementsByClassName('x'); 
  for(var i = 0; i < allButtons.length; i++){
    allButtons[i].addEventListener('click', fx);
  }
  function fx(){
    this.style.backgroundColor = 'red';
  }
}); 
</script>
<button class='x'>Execute</button>
<button class='x'>Execute</button>
<button class='x'>Execute</button>
<button class='x'>Execute</button>

但是感谢解决方案@CodeLover。

多个元素的类名，但在纯普通JS中独立执行事件

3 个答案: