喜怒无常 JavaScript: 函数只在某些时候起作用

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: 函数只在某些时候起作用

Temperamental JavaScript: function works only sometimes

javascript

variables

function

typeerror

getelementsbyclassname