javascript - 单击事件 getElementByClassName 返回未定义

Question

下面是我的 HTML 代码:

<div id="right">
    <div class="beschrijving">1</div>
    <div class="beschrijving">2</div>
    <div class="beschrijving">3</div>
    <div class="beschrijving">4</div>
    <div class="beschrijving">5</div>
    <div class="beschrijving">6</div>
</div>

这个div位于我页面的右侧；左侧是 6 张带有 class:portfolio-item 的图像(我正在制作一个作品集)。具有类 beschrijving(表示描述)的 div 在 CSS 中是 block: none;。

<div id="left">
    <div class="portfolio-item">
        <img src="images/fuxing.jpg" alt="fuxing"/>
        <div class="label">
            <h2>Fuxing</h2>
            <p>gebouwd met: HTML5, CSS, jQuery<br /> Responsive: yes<br />Gemaakt in 2013</p>
            <a href="fuxing/index.html">bekijk website</a>
        </div>
    </div>

我想要实现的是:如果我点击其中一张图像，其图像的描述必须显示在页面上。例如:3e 图像显示 3e 描述，但 JavaScript 代码返回空值。

(function () {
    "use strict";
    window.addEventListener("load", function () {
        var img = document.getElementsByClassName("portfolio-item"),
                text = document.getElementsByClassName("beschrijving"), i;
        for (i = 0; i < img.length; i++) {
            img[i].addEventListener("click", function () {
                text[i].style.display = "block";
            }, false);
        }
    }, false);
}());

我做错了什么？

Answer 1

这是因为作用域变量 i 在执行时位于数组索引之外。

简单地说，只有当图像被点击时，click函数才会被执行，此时，作用域中的i就是你的text.length + 1

您必须从 for 中提取函数，以便使用新变量指向作用域，或者将回调函数与当前索引绑定(bind)

所以，改成这样

var img = document.getElementsByClassName("portfolio-item"), text = document.getElementsByClassName("beschrijving"), i;
for (i = 0; i < img.length; i++) {
    img[i].addEventListener("click", function (localindex) {
        text[localindex].style.display = "block";
    }.bind(img[i], i), false);
}

或者像这样

function clickHandlerImages(index) { 
     text[index].style.display = "block";
}

var img = document.getElementsByClassName("portfolio-item"), text = document.getElementsByClassName("beschrijving"), i;
for (i = 0; i < img.length; i++) {
    img[i].addEventListener("click", clickHandlerImages.bind(img[i], i), false);
}

或者通过使用

function setClickHandler(img, text) {
    img.addEventListener("click", function() {
        text.style.display = "block";
    }, false);
}

var img = document.getElementsByClassName("portfolio-item"), text = document.getElementsByClassName("beschrijving"), i;
for (i = 0; i < img.length; i++) {
    setClickHandler(img[i], text[i]);
}

window.addEventListener('load', function() {
  var arrPortfolioItems = document.getElementsByClassName('portfolio-item'),
      arrDescriptionItems = document.getElementsByClassName('beschrijving'),
      i, len, portfolioItem, descriptionItem, currentIndex;
  
  for (i = 0, len = arrPortfolioItems.length; i < len; i++) {
    portfolioItem = arrPortfolioItems[i];
    descriptionItem = arrDescriptionItems[i];
    
    portfolioItem.addEventListener('click', function(localIndex) {
      if (currentIndex !== localIndex) {
        // reset the previously selected
        if (typeof currentIndex !== 'undefined') {
          arrDescriptionItems[currentIndex].style.display = 'none';
        }
        currentIndex = localIndex;
        arrDescriptionItems[currentIndex].style.display = 'block';
      }
    }.bind(portfolioItem, i));
  }
});

.beschrijving {
  display: none;
}
#left
{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 200px;
}
#right
{
  position: absolute;
  right: 0px;
  width: 200px;
  top: 0px;
}

<div id="left">
  <div class="portfolio-item">
    <img src="images/fuxing.jpg" alt="fuxing" />
    <div class="label">
      <h2>Fuxing</h2>
      <p>gebouwd met: HTML5, CSS, jQuery
        <br />Responsive: yes
        <br />Gemaakt in 2013</p>
      <a href="fuxing/index.html">bekijk website</a>
    </div>
  </div>
  <div class="portfolio-item">
    <img src="images/fuxing.jpg" alt="fuxing" />
    <div class="label">
      <h2>Fuxing</h2>
      <p>gebouwd met: HTML5, CSS, jQuery
        <br />Responsive: yes
        <br />Gemaakt in 2013</p>
      <a href="fuxing/index.html">bekijk website</a>
    </div>
  </div>
  <div class="portfolio-item">
    <img src="images/fuxing.jpg" alt="fuxing" />
    <div class="label">
      <h2>Fuxing</h2>
      <p>gebouwd met: HTML5, CSS, jQuery
        <br />Responsive: yes
        <br />Gemaakt in 2013</p>
      <a href="fuxing/index.html">bekijk website</a>
    </div>
  </div>
  <div class="portfolio-item">
    <img src="images/fuxing.jpg" alt="fuxing" />
    <div class="label">
      <h2>Fuxing</h2>
      <p>gebouwd met: HTML5, CSS, jQuery
        <br />Responsive: yes
        <br />Gemaakt in 2013</p>
      <a href="fuxing/index.html">bekijk website</a>
    </div>
  </div>
  <div class="portfolio-item">
    <img src="images/fuxing.jpg" alt="fuxing" />
    <div class="label">
      <h2>Fuxing</h2>
      <p>gebouwd met: HTML5, CSS, jQuery
        <br />Responsive: yes
        <br />Gemaakt in 2013</p>
      <a href="fuxing/index.html">bekijk website</a>
    </div>
  </div>
  <div class="portfolio-item">
    <img src="images/fuxing.jpg" alt="fuxing" />
    <div class="label">
      <h2>Fuxing</h2>
      <p>gebouwd met: HTML5, CSS, jQuery
        <br />Responsive: yes
        <br />Gemaakt in 2013</p>
      <a href="fuxing/index.html">bekijk website</a>
    </div>
  </div>
</div>
<div id="right">
  <div class="beschrijving">1</div>
  <div class="beschrijving">2</div>
  <div class="beschrijving">3</div>
  <div class="beschrijving">4</div>
  <div class="beschrijving">5</div>
  <div class="beschrijving">6</div>
</div>

我添加了一个片段来展示如何编写代码来工作，我有点懒，所以所有的投资组合项目都是相同的，但是当您单击不同的投资组合项目时，应该显示和隐藏描述