簡單滑塊的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;
}

我沒有試過，但是嘗試一下。