javascript - 为什么我的 onClick 的一项计算会应用于我循环遍历的所有元素

Question

目前正在做一些 CSS/Javascript 动画练习。我正在尝试从头开始制作一个轮播 slider 。我有 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;
        }

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

Answer 1

全局变量i不会复制到每个监听器中，而是在监听器之间共享。当您单击按钮时，i 已设置为其最终值，即 4。作为一种可能的解决方法，您可以使用局部变量覆盖全局变量，并使用 indexOf 获取点击索引:

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() {
    var i = Array.prototype.indexOf.call(buttons, this);
    wrapper.style[transformProperty] = 'translate3d(-' + (i * 260) + 'px,0,0)';
  });
}

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

#container {
  overflow: hidden;
  background: gray;
  margin-bottom: 1em;
  width: 260px;
  height: 100px;
}
#wrapper {
  width: calc(4 * 260px);
  height: 100px;
}
#wrapper div {
  padding: 0 1em;
  width: calc(260px - 2em);
  line-height: 100px;
  height: 100px;
  float: left;
  color: white;
  font-size: 3em;
  font-weight: bold;
  text-align: center;
}

<div id="container">
  <div id="wrapper">
    <div id="itemOne">1</div>
    <div id="itemTwo">2</div>
    <div id="itemThree">3</div>
    <div id="itemFour">4</div>
  </div>
</div>
<div>
  <button type="button">button 1</button>
  <button type="button">button 2</button>
  <button type="button">button 3</button>
  <button type="button">button 4</button>
</div>