Question

我已经在SO上看了一会儿（可能花了一个小时的时间来搜索），但我无法找到一个明确的答案。据我所知，我不使用jQuery或AJAX，只使用普通的JavaScript。这是它的样子：

var i;

var displayimg = document.getElementsById("displayimg"); // I'm not sure what I'm doing here. I thought that the onclick event might be in the wrong scope, so I tried setting it from JavaScript instead. It didn't work.
var imgb = document.getElementsByClassName("imgb");
for (i = 0; i < imgb.length; i += 1) {
    imgb[i].addEventListener("click", setSlide(i));
    console.log("successful");
}

var maxIndex;
var minIndex;

function startSlide(max, min) { // this function comes from the html body onload.
    "use strict";
    maxIndex = max;
    minIndex = min;
    showSlide(1);
}

function setSlide(n) { // this function comes from the .imgb buttons.
    "use strict";
    showSlide(n);
    console.log("OK");
}

function showSlide(n) {
    "use strict";
    if (n > maxIndex) {
        n = minIndex;
    } // if number exceeds 3, go back to 1 (top)
    if (n < minIndex) {
        n = maxIndex;
    } // if number deceeds 1, go back to 3 (bottom)
    for (i = 0; i < imgb.length; i += 1) { // loops through all imgb
        imgb[i].className = imgb[i].className.replace(" active", ""); // removes active class from all imgb
    }
    document.getElementsById("displayimg").style["background-image"] = "url('pre".concat(i, ".png')");
    imgb[n - 1].className += " active";
    console.log("slide updated");
}

<div id="displayimg" style="background-image:url('pre1.png');"></div>
<div style="text-align:center;">
    <span class="imgb"></span>
    <span class="imgb"></span>
    <span class="imgb"></span>
</div>

我可能搞乱了剧本，我在SO中看了很多教程和答案，并将它们混合在一起，希望它能起作用。当我尝试通过JSLint运行它时，一个反复出现的问题似乎是“超出范围”的事情，以及每个“for”循环都是意外的。这个问题打破了我。每次尝试新的解决方案时，我都觉得自己陷入了繁琐的未解决问题循环中。请，任何帮助表示赞赏。

Answer 1

您已撰写.getElementsById()，但正确的名称为.getElementById()且您的click回调函数未正确定义 - 您拥有它的方式，将立即调用该函数。它需要包含在另一个函数中。

此外，不要在多个回调中使用相同的循环计数器（i），因为将形成一个闭包，这将导致在多个函数执行中共享i的问题。

除此之外，通常最好不要使用getElementsByClassName()而是使用.querySelectorAll()，因为前者会返回＆＃34;活动节点列表＆＃34;，这可能更多资源比后者密集。此外，如果将.querySelectorAll()返回的节点列表转换为数组，则可以利用Array.forEach()方法，该方法允许您在不需要循环计数器的情况下循环遍历数组。

＆＃13;

var displayimg = document.getElementById("displayimg"); 

// If we turn the node list returned here into a proper Array, we don't need a loop counter
var imgb = Array.prototype.slice.call(document.querySelectorAll(".imgb"));

imgb.forEach(function(el, idx){
    el.addEventListener("click", function(){
      setSlide(idx);
    });
    console.log("successful");
});

var maxIndex;
var minIndex;

function startSlide(max, min) { // this function comes from the html body onload.
    "use strict";
    maxIndex = max;
    minIndex = min;
    showSlide(1);
}

function setSlide(n) { // this function comes from the .imgb buttons.
    "use strict";
    showSlide(n);
    console.log("OK");
}

function showSlide(n) {
    "use strict";
    if (n > maxIndex) {
        n = minIndex;
    } // if number exceeds 3, go back to 1 (top)
    if (n < minIndex) {
        n = maxIndex;
    } // if number deceeds 1, go back to 3 (bottom)
    imgb.forEach(function(el, idx){ // loops through all imgb
        el.className = el.classList.remove("active"); // removes active class from all imgb
    });
    document.getElementById("displayimg").style["background-image"] = "url('pre".concat(i, ".png')");
    imgb[n - 1].className += " active";
    console.log("slide updated");
}

＆＃13;

<div id="displayimg" style="background-image:url('pre1.png');"></div>
<div style="text-align:center;">
    <span class="imgb"></span>
    <span class="imgb"></span>
    <span class="imgb"></span>
</div>

＆＃13;

javascript - 非常简单的代码，但功能未定义

1 个答案: