在WordPress中添加事件侦听器

Question

我正在尝试向我的WordPress网站添加一个事件监听器，但不知何故它不起作用，我不知道为什么......我是一个只有一点自我教育的新开发人员，所以对什么不起作用的简单解释会有所欣赏！

这是我的代码和我正在尝试做的事情：我有6个相等的列，宽度为16.66％，我想在点击它们时更改它们的宽度，因此单击的列变为50％，其余为10％：

document.addEventListener("DOMContentLoaded", callIt);
function callIt() {     
    var x = document.getElementsByClassName('col-1-6');
    for (var j=0; j < x.lenght; j++) {
        x[j].addEventListener = ("click", function(){miniPage(this.Id);});
    }
}
var activeTab;
function miniPage(activeTab) {
    var i, arz;
    arz = document.getElementsByClassName('col-1-6');
    for (i = 0; i < arz.length; i++) {
        arz[i].style.width = "10%";
    }
document.getElementById(activeTab).style.width = "50%";

}

Answer 1

首先，你有一些错别字。

• 在第4行，您需要将lenght更改为length 。

• 在第5行， =不应该在那里。 你需要调用addEventListener作为x[j]的“方法”，如下所示：
  x[j].addEventListener("click", /* here goes your handler */)

• 在第5行，你需要更改this.Id to this.id如果你想访问相应DOM元素的id属性。

此外，您不需要在第8行声明activeTab变量，因为它在下一行用作函数参数。 基本上（省略关于arguments Array的解释），当您声明一个函数时，您在括号()写入的参数的值将从您调用该函数的位置获取。 例如，在您的情况下，当您将miniPage函数作为click处理程序调用时，将在第5行分配activeTab的值。

我没有在你的问题中看到HTML，所以为了简单起见，我们假设它有一个带有thead和th的table 。 当然，这也可以使用其他HTML DOM元素（如div ，但使用其他样式。

请注意 ，为了使您的JS工作，您需要为HTML中的DOM元素分配一些id属性。 我在下面的例子中完成了它。

你可以在下面看到工作示例。 在你的JS中，我只更改了上面提到的内容。

 document.addEventListener("DOMContentLoaded", callIt); function callIt() { var x = document.getElementsByClassName('col-1-6'); for (var j=0; j < x.length; j++) { x[j].addEventListener("click", function(){miniPage(this.id);}); } } function miniPage(activeTab) { var i, arz; arz = document.getElementsByClassName('col-1-6'); for (i = 0; i < arz.length; i++) { arz[i].style.width = "10%"; } document.getElementById(activeTab).style.width = "50%"; } 

 .col-1-6 { background-color: grey; cursor: pointer; width: 16.66%; height: 36px; } 

 <table> <thead> <th class="col-1-6" id="first-column"> 1st column </th> <th class="col-1-6" id="second-column"> 2nd column </th> <th class="col-1-6" id="third-column"> 3rd column </th> <th class="col-1-6" id="fourth-column"> 4th column </th> <th class="col-1-6" id="fifth-column"> 5th column </th> <th class="col-1-6" id="sixth-column"> 6th column </th> </thead> </table>