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是在执行时，在数组的索引之外。

更容易说，点击功能只有在点击图像后才会执行，那时，范围内的i有你的text.length + 1

您必须从for中提取函数，以便使用新变量指向范围，或将回调函数与当前索引绑定

所以，改为

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>

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

click事件getElementByClassName返回undefined

1 个答案: