毫不妨碍地调用带有参数的函数

问题描述 投票：0回答：3

我有一个功能代码，但为了学习而想对其进行改进。

我做了很多研究，只找到了使用 jQuery 的解决方案，但由于我仍然是初学者，我想首先使用纯 js 进行制作。 [https://stackoverflow.com/questions/7205148/how-do-i-get-html-button-value-to-pass-as-a-parameter-to-my-javascript]

基本上，我有一个列表，我希望该列表中的每个条目都调用具有给定参数（自然数）的函数。

在经典/干扰性技术中，我们拥有：

<li><a href="#" id="0" class="myClass" onclick="return myFunction(0);" >clickMe</a></li>
<li><a href="#" id="1" class="myClass" onclick="return myFunction(1);" >clickMe</a></li>
...

或

<li><a href="javascript:myFunction(0)" id="0" class="myClass">ClickMe</a></li>
<li><a href="javascript:myFunction(1)" id="1" class="myClass">ClickMe</a></li>
...

和

<li><button class="myClass" onClick="return myFunction(0);">ClickMe</button></li>
...

确实调用 

myFunction()
并将参数设置为 
0, 1
等等。

但我读到不建议这样做

  • 我正在使用 
    <a>
    标签，但我不打算链接到任何地方。
  • 它混合了 HTML 和 JavaScript，并且尽可能将关注点分离

然后就是不引人注目的方式

<li><button id="0" class="myClass">clickMe</button></li>

完成者

document.getElementById("0").onclick = function (){myFunction()}

这可行，但我找不到设置参数的方法。 例如，如果我向按钮添加 

value="0"
属性或 
myVar="0"
，则我无法使用 
value
作为变量，因为它未声明，并且它不会设置 
 的新值myVar
，因此 
myFunction
被调用，参数错误为 
myVar="myVarPreviousValue"

使用GetElementsByClassName：编辑：更新

之前我们使用过

document.getElementById
，但是如果列表很长，这可能会非常不方便，因为我们必须为每个按钮创建一个事件监听器。在这种情况下，使用 
document.getElementsByClassName
似乎是合适的。

正如epascarello所指出的，这里对使用此方法有一个很好的解释Document.getElementsByClassName 不起作用。

但是，可以通过精确获取在给定类的元素中设置的变量值以调用具有给定参数的函数来完成此线程

底线问题

当用户单击某些具有给定类（可能是<li>、<button>、

<span>
、 
<div>
你认为最好）
提前致谢
Edit
：更新了与使用 getElementsByClassName 相关的问题

    

	

  
还有一个不显眼的方法


javascript

jquery

html

function

parameter-passing


3个回答




    
    
    

        

            

                

                    
2
投票

                    
                

            

        

        
<li><button id="0" class="myClass">clickMe</a></li>


  
  
完成者



 document.getElementById("0").onclick = function (){myFunction()}






（旁注：那里有 
<button ...></a>
，可能意味着最后的 
</button>
。）


在特定情况下，只需 


document.getElementById("0").onclick = function (){ myFunction(0); };
// ------------------------------------------------------------^




...但我总是提倡 
addEventListener
，所以代码与其他代码可以很好地配合：



document.getElementById("0").addEventListener("click", function (){ myFunction(0); }, false);



（如果你必须支持像IE8这样过时的浏览器，
这个答案
有一个跨平台的
hookEvent
你可以使用而不是addEventListener。）


如果您想使用 
same
 处理程序并将参数放在元素上，则可以使用 
id
 或 data-* 属性：


 <li><button id="0" data-value="0" class="myClass">clickMe</button></li>



完成者



document.getElementById("0").addEventListener("click", myFunction, false);




然后



function myFunction() {
    var parameter = this.getAttribute("data-value");
    // or var parameter = this.id;
    // ...
}




这是一个使用 
querySelectorAll
 处理所有具有 
button
 属性的 
data-value
 元素的示例，并在单击时显示 
data-value
 属性：






var buttons = document.querySelectorAll("button[data-value]");
Array.prototype.forEach.call(buttons, function(btn) {
  btn.addEventListener("click", handler, false);
});
function handler() {
  console.log("Value: " + this.getAttribute("data-value"));
}


<button type="button" data-value="one">I'm 'one'</button>
<button type="button" data-value="two">I'm 'two'</button>
<button type="button" data-value="three">I'm 'three'</button>
<button type="button" data-value="four">I'm 'four'</button>










旁注：虽然它是有效的 HTML，但我通常会避免以数字开头 
id
 值，因为虽然它们与 
getElementById
 一起使用，但它们在 CSS 选择器中使用起来很尴尬（例如，
#0
 是无效的） ).
    


既然重新开放了，我就来回答吧。 




    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
getElementByClassName
，有
getElementsByClassName
。您不能直接绑定到集合。您需要循环实时 html 集合来添加事件。 






var anchors = document.getElementsByClassName("myClass");
for (var i = 0; i < anchors.length; i++) {
  anchors[i].addEventListener("click", function(e) {
    console.log(this.getAttribute("data-id"));
  });
}


<ul id="myList">
  <li><a href="#" data-id="0" class="myClass">ClickMe</a></li>
  <li><a href="#" data-id="1" class="myClass">ClickMe</a></li>
</ul>







简单的答案是事件委托，父元素上的单击事件，查看事件对象以了解单击的内容，然后您就拥有了该元素。读取数据属性或 ID，您就得到了编号。







var list = document.getElementById("myList");
list.addEventListener("click", function(e) {
   console.log(e.target.getAttribute("data-id"));
});


<ul id="myList">
  <li><a href="#" data-id="0" class="myClass">ClickMe</a></li>
  <li><a href="#" data-id="1" class="myClass">ClickMe</a></li>
</ul>





    




如果你有预定义的函数，你可以这样做




    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        



并使用数据属性来传递数据或 this.id（如果足够的话）







function myFunction(e) {
  e.preventDefault(); // cancel click
  e.stopPropagation(); // cancel event bubbling 
  console.log(this.id, this.getAttribute("data-val")||this.value);
}
window.onload = function() {
  var elements = document.querySelectorAll(".myClass");
  for (var i = 0; i < elements.length; i++) {
    elements[i].onclick = myFunction;
  }
}


<ul>
  <li><a href="#" id="link0" data-val="value 0" class="myClass">clickMe</a></li>
  <li><a href="#" id="link1" data-val="value 1" class="myClass">clickMe</a></li>
</ul>
<ul>
  <li><button type="button" id="but0" value="value 0" class="myClass">clickMe</button></li>
  <li><button type="button" id="but1" value="value 1" class="myClass">clickMe</button></li>
</ul>
<ul>
  <li id="link0" data-val="value 0" class="myClass">clickMe</li>
  <li id="link1" data-val="value 1" class="myClass">clickMe</li>
</ul>





    

	



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.