Question

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

然后我创建了4个我想要点击的LI，以便它为每个LI翻译包装器-550 * I度。

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

我遇到的问题是这个转换属性的第一个计算应用于所有LI（[1] [2]和[3]的550 * i不是＆＃39 ; t applied）。

这是我目前正在使用的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>

为什么我的onClick的一个计算应用于我循环的所有元素

1 个答案: