Question

我有一个只在有时工作的javascript函数。我有时会得到Uncaught TypeError: Cannot read property of undefined，有时功能会按预期运行。

为了清楚地解释和演示我录制此短片的问题：https://youtu.be/uSSes2_DPXU

这是我的功能：

function openLightBox() {
    var itemId = event.target.id; 
    var lightBox = document.getElementsByClassName(itemId);
    console.log(lightBox);
    lightBox[0].style.display = 'block' ;
}

解

最终HTML：

<a onClick="openLightBox(<?php echo get_the_ID()?>)">

最后的JS：

function openLightBox(id) {
    var lightBox = document.getElementsByClassName(id);

    console.log(lightBox);
    lightBox[0].style.display = 'block';
}

Answer 1

它有时可行的原因，我在这里有点猜测，取决于你点击元素的位置。由于您已将a标记包含在包含ID的div周围，因此您的a标记是否恰好环绕div维度？

实际上，将ID添加到a标记会更有意义。

<a onClick="openLightBox(<?php echo get_the_ID()?>)">

然后你的功能会像这样：

function openLightBox(id) {
    var lightBox = document.getElementById(id);

    console.log(lightBox);
    lightBox.style.display = 'block';
}

extra info: event bubbling and target -vs- currentTarget

Answer 2

您使用event.target有点不对劲。因此，在下面的代码段中，您可以看到目标更改取决于您点击的位置。

function openlightbox(e) {
  console.log(e);
  document.getElementById('target').innerHTML = e.target.outerHTML.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

.overlay {
  background-color: #fbfbfb;
  width: 100%;
  height: 100%;
  border: 1px solid black;
}
.title {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: auto;
}
h3 {
  border: 1px solid green;
}
p {
  border: 1px solid blue;
}

<article>
  <a onclick="openlightbox(event)">
    <div class='overlay' id="v1">
      <div class="title">
        <h3>Title</h3>
        <p>category</p>
      </div>
    </div>
  </a>
</article>
<pre id='target'></pre>

为了解决问题，您可以直接将其传递给函数。或者使用addEventHandler函数

添加事件处理程序

var a = document.querySelectorAll('article a.open');
console.log(a);
for (var i = 0, len = a.length; i < len; i++) {
  console.log(a[i],a[i].addEventListener);
  a[i].addEventListener('click', function(e) {
    document.getElementById('target').innerHTML = e.target.outerHTML.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    document.getElementById('target').innerHTML += '<br /> this.id:'+ this.id;
    document.getElementById('target').innerHTML += '<br /> this:'+ this.outerHTML.replace(/</g, '&lt;').replace(/>/g, '&gt;');
  },false);
}

.overlay {
  background-color: #fbfbfb;
  width: 100%;
  height: 100%;
  border: 1px solid black;
}
.title {
  width: 200px;
  height: 100px;
  border: 1px solid red;
  margin: auto;
}
h3 {
  border: 1px solid green;
}
p {
  border: 1px solid blue;
}

<article>
  <a class="open" href="#"  id="v1">
    <div class='overlay'>
      <div class="title">
        <h3>Title</h3>
        <p>category</p>
      </div>
    </div>
  </a>
</article>
<pre id='target'></pre>

性情的JavaScript：函数有时只起作用

2 个答案: