简单 slider 的 Javascript 函数不执行 onclick

Question

您好，感谢您的查找。 我决定通过反复试验和谷歌搜索我需要的东西来学习 Javascript。到目前为止一切顺利，但是当我尝试一些有点棘手的东西( slider )时，事情变得很困难。

我对 Javascript 语法以及如何在函数中编写表达式不太了解，但我正在尝试。

所以这里我们在一个 div 中有一个简单的 4 个图像，带有 2 个箭头 slider 。当我们单击箭头时，我们希望计数器减少 1，我们要确保它不等于 0，如果等于，我们将其更改为 4，完成后，我们给相应的图像 ( img[counter] ) a z例如指数为 50。但这不起作用。由于某种原因。

这是整个事情的一个 fiddle ，希望我不会给你们带来太多麻烦。

https://jsfiddle.net/wu2Lysrv/3/

function slideEngine() {
    var img1 = document.querySelector("#img1");
    var img2 = document.querySelector("#img2");
    var img3 = document.querySelector("#img3");
    var img4 = document.querySelector("#img4");
    var counter = 1;

    function slideL() {
        counter--;
        if (counter == 0) {
            counter = 4;
        }
        img[counter].setAttribute("z-index", "50");
    }
}

如果有人变得愤怒，我会理解，因为我敢打赌那边的这段代码是非常非常错误的。尽管如此，我还是想了解如何正确地做到这一点。

Answer 1

slideL 函数位于 slideEngine 内部，因此您的 html 无法直接访问它。

一个潜在的修复方法是简单地删除包装函数，因为它似乎没有在任何地方使用。但是，该代码还存在其他问题，会阻止其工作。我尝试修复以下一些问题。

var img1 = document.querySelector("#img1");
var img2 = document.querySelector("#img2");
var img3 = document.querySelector("#img3");
var img4 = document.querySelector("#img4");
var counter = 1;

function slideL() {
    counter--;
    if (counter == 0) {
        counter = 4;
    }
    window['img'+counter].style.zIndex = 50;
}

我没有测试这个，但尝试一下。