在 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行，如果要访问相应DOM元素的属性，则需要更改this.Id为。this.idid

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

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

请注意，为了使 JS 正常工作，您需要id为 HTML 中的 DOM 元素分配一些属性。我已经在下面的例子中做到了。

您可以在下面看到工作示例。在你的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>