18910140161

JavaScript-为什么当我单击一个链接时,它会为我的所有链接执行该函数?(JavaScipt)-堆栈溢出

顺晟科技

2022-10-18 13:35:57

229

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

<代码><;脚本>;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=过滤器(a.ID);B.onclick=过滤器(B.ID);C.onclick=过滤器(C.ID);d.onclick=过滤器(d.ID);e.onclick=过滤器(e.ID);  函数筛选器(标记){对于(Var I=0;我<;X.长度;I++)if(tag===";查看全部";){X[I].style.display=";阻止";}别的{if(tag.toLowerCase()===X[I].getAttribute(' alt ').toLowerCase())X[I].style.display=";阻止";别的X[I].style.display=";无";}返回FALSE;}  }
我设置链接

的顶部如下所示:

<代码><;a href=";";ID=";ID1";REL=";历史";类=";活动";>;查看全部<;/a>;<;a href=";";ID=";ID2";类=";活动";>;ID 2<;/A>;<;a href=";";ID=";ID3";类=";活动";>;ID 3<;/a>;<;a href=";";ID=";ID4";类=";活动";>;ID 4<;/A>;<;a href=";";ID=";ID5";类=";活动";>;ID 5<;/A>;

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

提前

感谢您的帮助。


顺晟科技:

发生

的情况是,只要您尝试分配事件处理程序,您的函数就会执行。具有<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.onclick=过滤器(a.ID);B.onclick=过滤器(B.ID);C.onclick=过滤器(C.ID);d.onclick=过滤器(d.ID);e.onclick=过滤器(e.ID);函数FilterWrapper(标记){Var tagValue=标签;返回函数filter(){让标签=标签值;对于(Var I=0;我<;X.长度;I++)if(tag===";查看全部";){X[I].style.display=";阻止";}别的{if(tag.toLowerCase()===X[I].getAttribute(' alt ').toLowerCase())X[I].style.display=";阻止";别的X[I].style.display=";无";}返回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> 属性的值。();内部事件处理程序属于元素本身。

<代码>a.onclick=过滤器;B.onclick=过滤;C.onclick=过滤;d.onclick=过滤;e.onclick=过滤器;  函数筛选器(){let tag=this.getAttribute(' ID ');对于(Var I=0;我<;X.长度;I++)if(tag===";查看全部";){X[I].style.display=";阻止";}别的{if(tag.toLowerCase()===X[I].getAttribute(' alt ').toLowerCase())X[I].style.display=";阻止";别的X[I].style.display=";无";}返回FALSE;}  }
  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航