为啥当我单击一个链接时，它会为我的所有链接执行该功能？ (Javascipt)

Posted 2023-03-25

【中文标题】为啥当我单击一个链接时，它会为我的所有链接执行该功能？ (Javascipt)

【英文标题】：Why when I click one link is it executing the function for all of my links? (Javascipt)为什么当我单击一个链接时，它会为我的所有链接执行该功能？ (Javascipt)

【发布时间】：2021-11-14 09:09:38

【问题描述】：

当我点击“id2”的链接时，它会为每个链接执行过滤功能，以“id5”作为我页面上可见的过滤列表结束。

<script>
window.onload = function() 

var a = document.getElementById("id1");
  var b = document.getElementById("id2");
  var c = document.getElementById("id3");
  var d = document.getElementById("id4");
  var e = document.getElementById("id5");
  var x = document.getElementsByClassName("className")

    
  a.onclick = filter(a.id);
  b.onclick = filter(b.id);
  c.onclick = filter(c.id);
  d.onclick = filter(d.id);
  e.onclick = filter(e.id);

  
  function filter(tag) 
    for (var i = 0; i < x.length; i++)
        if (tag === "view all") 
            x[i].style.display = "block";
           
        else 
             if (tag.toLowerCase() === x[i].getAttribute('alt').toLowerCase()) 
        x[i].style.display = "block";
      else
        x[i].style.display = "none";
        
        
    return false;
    
  

我设置链接的顶部如下所示：

<a href="" id="id1" rel="history" class="active">View All</a>
<a href="" id="id2" class="active">ID 2</a>
<a href="" id="id3" class="active">ID 3</a>
<a href="" id="id4" class="active">ID 4</a>
<a href="" id="id5" class="active">ID 5</a>

过滤器工作正常，唯一的问题是它正在为所有链接执行功能！

提前感谢您的帮助。

【问题讨论】：

请创建一个minimal reproducible example。我也想知道点击有什么作用，因为a.onclick = filter(a.id); 是错误的；这是a.onclick = () => filter(a.id);

点击不会做任何事情。窗口加载时所有代码都已执行。

一个很好的提示：您应该查看附加侦听器，然后解析事件。然后，您可以通过该已解析事件访问该元素，以准确了解您按下了哪个链接。 event.target。这样，您将拥有一个完全动态的函数，可帮助您简化逻辑并避免冗余，例如重复的 getElementById。而是将侦听器附加到一个类。

【参考方案1】：

发生的情况是，一旦您尝试分配事件处理程序，您的函数就会执行。 任何带有(); 的函数都会被执行。

您可以使用闭包的概念并返回一个新函数。使用为每个标签返回一个新函数的函数包装器。

a.onclick = filter(a.id);
  b.onclick = filter(b.id);
  c.onclick = filter(c.id);
  d.onclick = filter(d.id);
  e.onclick = filter(e.id);

  function filterWrapper(tag)  
  var tagValue = tag; 
 return function filter() 
    let tag = tagValue;
    for (var i = 0; i < x.length; i++)
        if (tag === "view all") 
            x[i].style.display = "block";
           
        else 
             if (tag.toLowerCase() === x[i].getAttribute('alt').toLowerCase()) 
        x[i].style.display = "block";
      else
        x[i].style.display = "none";
        
        
    return false;
    
   

显然，您可以在函数本身中获取id 属性的值。 this 内部事件处理程序属于元素本身。

 a.onclick = filter;
  b.onclick = filter;
  c.onclick = filter;
  d.onclick = filter;
  e.onclick = filter;

  
  function filter() 
   let tag = this.getAttribute('id');
    for (var i = 0; i < x.length; i++)
        if (tag === "view all") 
            x[i].style.display = "block";
           
        else 
             if (tag.toLowerCase() === x[i].getAttribute('alt').toLowerCase()) 
        x[i].style.display = "block";
      else
        x[i].style.display = "none";
        
        
    return false;