Javascript 不执行 onclick 的简单滑块函数

Question

您好，感谢您的关注。我决定通过反复试验和谷歌搜索我需要的东西来学习 Javascript。到目前为止一切顺利，但当我尝试一些有点棘手的东西时，一个滑块，事情变得艰难。

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

所以这里我们在 div 中有一个简单的 4 张图片，带有 2 个箭头滑块。当我们单击箭头时，我们希望计数器减 1，我们希望确保它不等于 0，如果等于，我们将其更改为 4，完成后我们给相应的图像 ( img[counter] ) 一个 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;
}

我没有测试这个，但试试吧。

Javascript 不执行 onclick 的简单滑块函数

Javascript function for simple slider not executing onclick

javascript

function

slide