Javascript 为什么我的onClick的一个计算会应用到我'；我在绕圈子

目前正在为CSS/Javascript动画做一些练习。我正试图从头开始制作旋转木马滑块。。我有4个宽度为550px的div嵌套在2200px的包装中，然后它嵌套在550px的包装中，溢出隐藏

然后我创建了4个LI，我想让它可以点击，这样它可以为每个LI转换包装-550*I度

我执行了一个queryselectorall来获取所有的li，用for循环遍历它，并创建了一个应该为每个li按钮应用onclick功能的函数

我遇到的问题是，此变换属性的第一次计算应用于所有LI（不应用[1][2]和[3]的550*I）

这是我目前正在使用的HTML

<div id="container">
    <div id="wrapper">
        <div id="itemOne" > 
        </div>

        <div id="itemTwo">
        </div>

        <div id="itemThree">
        </div>

        <div id="itemFour"> 
        </div>
    </div>

</div>

<ul>
    <li class="button"></li>
    <li class="button"></li>
    <li class="button"></li>
    <li class="button"></li>
</ul>

Javascript

        var wrapper = document.querySelector("#wrapper");
        var buttons = document.querySelectorAll(".button");

        for(var i = 0; i < buttons.length; i++){
            var curBut = buttons[i];

            curBut.addEventListener("click", function(){
                wrapper.style[transformProperty] = 'translate3d(-'+((0-i) * 550) +'px,0,0'
            })

            console.log(((0-i) * 550));
        }
        console.log(buttons);


        var transforms = ["transform",
                        "msTransform",
                        "webkitTransform",
                        "mozTransform",
                        "oTransform"];

        var transformProperty = getSupportedPropertyName(transforms);

        function getSupportedPropertyName(properties) {
            for (var i = 0; i < properties.length; i++){
                if(typeof document.body.style[properties[i]] != "undefined") {
                    return properties[i];
                }
            }
            return null;
        }

var wrapper=document.querySelector（“#wrapper”）；
var buttons=document.queryselectoral（“.button”）；
对于（变量i=0；i

---

如果有人能解释为什么函数没有对每个LI的包装应用不同的更改，那就太好了！谢谢！！

全局变量

i

没有复制到每个侦听器中，而是在侦听器之间共享。当您单击按钮时，

i

已经设置为其最终值，即

4

可能的解决方法您可以使用局部变量覆盖全局变量，并在单击时使用

indexOf

获取索引：

var wrapper=document.querySelector（“#wrapper”）；
var buttons=document.queryselectoral（“按钮”）；
对于（变量i=0；i

#容器{
溢出：隐藏；
背景：灰色；
边缘底部：1米；
宽度：260px；
高度：100px；
}
#包装纸{
宽度：计算（4*260px）；
高度：100px；
}
#包装部{
填充：0.1em；
宽度：钙（260px-2米）；
线高：100px；
高度：100px；
浮动：左；
颜色：白色；
字号：3em；
字体大小：粗体；
文本对齐：居中；
}

1.
2.
3.
4.
按钮1
按钮2
按钮3
按钮4

全局变量

i

不会复制到每个侦听器中，而是在侦听器之间共享。当您单击按钮时，

i

已设置为其最终值，即

4

。作为一种可能的解决方法，您可以使用局部变量覆盖全局变量，并在单击时使用

indexOf获取索引颂歌>：


var wrapper=document.querySelector（“#wrapper”）；
var buttons=document.queryselectoral（“按钮”）；
对于（变量i=0；i

#容器{
溢出：隐藏；
背景：灰色；
边缘底部：1米；
宽度：260px；
高度：100px；
}
#包装纸{
宽度：计算（4*260px）；
高度：100px；
}
#包装部{
填充：0.1em；
宽度：钙（260px-2米）；
线高：100px；
高度：100px；
浮动：左；
颜色：白色；
字号：3em；
字体大小：粗体；
文本对齐：居中；
}

1.
2.
3.
4.
按钮1
按钮2
按钮3
按钮4
可能重复的可能重复的嘿！感谢您的透彻解释！非常感谢！@optic\u elation它有助于解决您的问题吗？还有其他细节需要澄清吗？嘿，他们肯定有。查看了您的其他一些javascript解释，非常有帮助！！它澄清了我所了解的一些主要JS概念一个简短而简洁的总结。爱死它了！@optic\u高兴得很甜蜜，谢谢！不要