javascript - Jquery 选择下一个 eq(i+1) 作为按下按钮时的动画

Question

我想为 div 中的下一个图像渲染动画，当我每次按下箭头按钮时，它都会渲染该 div 中的下一个图像的动画。我已经尝试过这段代码，请帮忙。

$(document).ready(function() {
    var i = 0;
    $(document).keydown(function(e) {
        if (e.which == 39) {
            $("#mydiv:eq(i)").animate({
                left: "-=50"
            });
        }
        i++;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="thing">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>  
</div>

Answer 1

使用模板字符串文字将i的值传递给:eq方法。

$(document).ready(function() {
    var i = 0;
    $(document).keydown(function(e) {
        if (e.which == 39) {
            $(`.thing span:eq(${i})`).animate({
                  opacity: "0.5",
                  left: "+=50"
            }, 100);
        }
        i++;
    });
});

.thing {
  height: 130px;
  width: 100px;
  border: 1px black solid;

  display: block;
  left: 0px;
  position: relative;
}

span {
  display: block;
  background: #f00;
  margin-bottom: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="thing">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>  
</div>