click事件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是block: none; 在CSS中。

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

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