使用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>

- Dheeraj Kumar

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>

- Denis Tsoi

---

但是是否可能不使用两个div：thing对于两个元素，因为我有很多元素，并且我想在单个div中包含所有元素，而不是为每个单独的元素使用单独的div。 - Denis Tsoi

我是说，可以不使用以下代码： <div class="thing"> <span>0</span> </div> <div class="thing"> <span>1</span> </div>而改用以下代码吗？ <div class="thing"> <span>0</span> <span>1</span> </div> - Dheeraj Kumar

我也给这篇文章点了赞，但是它显示出现了一些错误，对此很抱歉。（错误信息：“感谢您的反馈！那些声望低于15的用户投票会被记录，但不会改变公开显示的帖子分数。”） - Dheeraj Kumar

稍等一下 - 我可以尝试给你更多的赞来让这个问题被接受 - 但我现在正在解决另一个 Stack Overflow 的问题 - 给我15分钟。 - Denis Tsoi

我已尝试将两个span都包含在同一个类中，如下：

0 1

然后尝试使用jQuery语句$(.thing::nth-child(${i})).animate({，但仍然无法正常工作。 - Dheeraj Kumar