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称为＆＃34;方法＆＃34; x[j]，如此：
x[j].addEventListener("click", /* here goes your handler */)
在第5行，如果您想访问相应DOM元素的this.Id属性，则需要将this.id更改为id。

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

我没有在您的问题中看到HTML，因此为了简单起见，我们假设它有table thead和th。当然，这也可以使用其他HTML DOM元素来完成，例如div，但还有其他样式。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在WordPress中添加事件侦听器

1 个答案: