如何将 onclick 功能设置为多个元素？答案

【问题标题】：How to set onclick functions to multiple elements?如何将 onclick 功能设置为多个元素？
【发布时间】：2014-12-22 19:41:18
【问题描述】：

我正在尝试使用 javascript 为我的链接设置 onclick 属性。当用户点击链接时，我想设置一个cookie。

这里是设置cookie的代码：

function setCookie(cookieName, cookieValue, cookiePath, cookieExpires){
    cookieValue = escape(cookieValue);
    if (cookieExpires == "") {
      var nowDate = new Date();
      nowDate.setMonth(nowDate.getMonth() + 6);
      cookieExpires = nowDate.toGMTString();
} if (cookiePath != "") {
  cookiePath = ";Path=" + cookiePath;
}
document.cookie = cookieName + "=" + cookieValue + 
  ";expires=" + cookieExpires + cookiePath;
}

function getCookieValue(cookieName)
{
var cookieValue = document.cookie;
var cookieStartsAt = cookieValue.indexOf(" " + cookieName + "=");
if (cookieStartsAt == -1)
{
  cookieStartsAt = cookieValue.indexOf(cookieName + "=");
}
if (cookieStartsAt == -1)
{
  cookieValue = null;
}
else
{
  cookieStartsAt = cookieValue.indexOf("=", cookieStartsAt) + 1;
  var cookieEndsAt = cookieValue.indexOf(";", cookieStartsAt);
  if (cookieEndsAt == -1)
  {
     cookieEndsAt = cookieValue.length;
  }
  cookieValue = unescape(cookieValue.substring(cookieStartsAt,
     cookieEndsAt));
}
return cookieValue;
}

现在这里是设置 onclick 功能的代码：

var elements = document.getElementsByTagName('a');
   for(var i = 0, len = elements.length; i < len; i++) {
        elements[i].onclick = setCookie("workshop", elements[i].getAttribute("name"), "", "");
   }

我希望将 cookie 值设置为链接的名称。例如，如果我有一个链接 <a href="#" name="test2"> ，我希望将 cookie 设置为“test2”。

但是，使用此代码，cookie 值始终是页面上最后一个标记（最后一个链接）的名称属性。我希望每个链接都有自己的 onclick 功能；并非所有人都将cookie设置为相同的值。这样，一旦用户到达下一个屏幕，我就会知道他们点击了哪个链接。

非常感谢任何帮助！提前谢谢！

【问题讨论】：

请read this post。
你没有谈论 jquery，但使用类属性和选择器会更简单一点：每个 <a> 都有类 cookielink 你可以这样做：$('.cookielink').click(function(){ setCookie("workshop", $(this).attr('name'), "", ""); });跨度>
@Teemu 谢谢！我将如何为我的代码实现它？
我对 jquery @Hemadeus 不是很熟悉。该代码会简单地代替我的变量声明和 for 循环吗？
@ChellyS 好吧，它的意思是，每个具有cookielink 类的对象都设置了点击事件（传入参数）。在这种情况下 $(this) 代表 <a> 。简而言之，它取代了循环。并且您需要将cookielink 类添加到您希望可点击的每个控件。

标签： javascript html onclick setcookie

【解决方案1】：

使用addEventListener() 函数而不是onclick 事件处理程序。这样的事情应该做你想做的事：

var elements = document.getElementsByTagName('a');
for (var i = 0, len = elements.length; i < len; i++) {
  elements[i].addEventListener("click", function() {
    setCookie("workshop", this.getAttribute("name"), "", "");
  });
}

【讨论】：

完美！ 这正是我想要的！非常感谢。我必须研究一下 EventListener 是什么，因为这是我第一次使用这种方法。再次感谢。