Question

我正在尝试在WP网站上实现内容储存器。我通常会在触发弹出窗口的元素上添加HTML代码onclick="call_locker()"。但是，由于我用于构建网站的插件，我无法直接访问HTML。

这是我要将call_locker()函数附加到的按钮元素：

<a href="#" target="_self" class="fl-button" role="button">
    <span class="fl-button-text">Subscribe!</span>
</a>

我的目的是通过call_locker()触发事件将.fl-button函数附加到整个.onclick类。这样，我就可以在我创建的任何其他.fl-button或页面上全局使用它。

这是我提出的代码：

(function() {
  document.getElementsByClassName("fl-button").onclick = function() { 
    call_locker(); 
  };
})();

然而，当我点击按钮时没有任何反应： - （

我不是java的专家，所以我只希望我的语法正确以及我用于帖子的术语。

提前感谢您的帮助！

Answer 1

activeadmin返回HTMLCollection，它是一个类似于对象的数组。您需要迭代对象并为每个锚标记添加getElementsByClassName事件侦听器。

Document.getElementsByClassName()

返回具有所有给定类名的所有子元素的类数组对象...

您可以使用click迭代集合，但在必须将其转换为数组之前，可以通过调用Array.prototype.forEach来完成。

这是一个例子。

＆＃13;

[].slice.call(HTMLCollection)

＆＃13;

var flBtns = document.getElementsByClassName("fl-button");

[].slice.call(flBtns).forEach(function(btn) {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    console.log(e.target);
    // call your locker function here.
    //call_locker()
  })
})

＆＃13;

将onclick = call_locker（）事件附加到CSS类

1 个答案: