简单滑块的Javascript函数无法执行onclick

Question

您好，感谢您的查询。 我决定通过反复试验来学习Javascript，并通过Google搜索我需要的东西。 到目前为止还算不错，但是当我尝试一些棘手的事情（滑块）时，事情变得很艰难。

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

因此，在这里，我们在一个带有2个箭头滑块的div中有一个简单的4张图像。 当我们单击箭头时，我们希望计数器减少1，我们要确保它不等于0，如果确实不等于0，则将其更改为4，完成后，我们给各自的图像（img [counter]）az例如，索引为50。 但它不起作用。 由于某些原因。

这是整件事的小提琴，希望我不要为此给你们带来太多麻烦。

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

我没有试过，但是尝试一下。