Question

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

我做了很多研究，只找到了一个使用jQuery的解决方案，但由于我还是一个初学者，我想首先在普通的js中进行。 [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 not working。

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

底线问题

当用户点击某些的html内容时，如何，不显眼，调用具有给定参数的功能给定课程（可能是<li>，<button>，<span>，<div>，您认为最好）

提前谢谢学家

修改：更新了与使用getElementsByClassName相关的问题

Answer 1

然后有一种不引人注目的方式

<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等过时的浏览器，this answer有一个跨平台hookEvent，您可以使用而不是addEventListener。）

如果您想使用相同的处理程序并将参数放在元素上，您可以使用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属性的示例：

＆＃13;

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"));
}

＆＃13;

<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>

＆＃13;

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

Answer 2

如果您有预定义的功能，则可以执行

var elements = document.querySelectorAll(".myClass");
for (var i=0;i< elements.length;i++) {
  elements[i].onclick = myFunction;
}

并使用data-attribute传递数据或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>

Answer 3

自重新开放以来，我会回答。

getElementByClassName没有getElementsByClassName。您不能直接绑定到集合。您需要遍历实时html集合以添加事件。

＆＃13;

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"));
  });
}

＆＃13;

<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>

＆＃13;

简单的答案是事件委派，父元素上的一次单击事件，查看事件对象以查看所点击的内容并且您拥有该元素。读取数据属性或ID，你就有了数字。

＆＃13;

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

＆＃13;

<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>

＆＃13;

带参数的调用函数不引人注目

3 个答案: