Question

我正在尝试创建一个图像滑块，其中移动滑块上的手柄将更改要显示的图像。

在下面的代码中，我使用onchange函数动态更新图像（id =＆＃34; image＆＃34;）基于滑块的当前值（id =＆＃34; image-slider-response＆＃34;）。

     var imageGroup1 = ['imageA.jpg','imageB.jpg','imageC.jpg'];
     var slide = document.getElementById('image-slider-response');
     var imageDiv = document.getElementById("image");
     slide.onchange = function() {
         imageDiv.src = imageGroup1[this.value];
     }

现在，我尝试将imageGroup作为参数传递给onchange函数，以将上面的代码扩展到其他图像组。我按照此链接http://www.jstips.co/en/javascript/passing-arguments-to-callback-functions/但似乎没有效果。有什么建议来解决这个问题

    var imageGroup1 = ['imageA.jpg','imageB.jpg','imageC.jpg'];
    var imageGroup2 = ['imageD.jpg','imageE.jpg','imageF.jpg'];
    var slide = document.getElementById('image-slider-response');
    var imageDiv = document.getElementById("image");

    function myFunction(x){
        return function(){
            sliderDiv.innerHTML = slide.value;
            imageDiv.src = x[slide.value];
        }
    }
    var imageGroup = imageGroup1;
    slide.addEventListener("onchange", myFunction(imageGroup));

Answer 1

你在回调的正确轨道上，只有一件事 - 当使用addEventListener时，不要在on前面加上事件：使用普通事件名称。

slide.addEventListener("change", myFunction(imageGroup));

将参数传递给onchange（）函数

1 个答案: