javascript - 使用 JavaScript/jQuery 在当前图像之上显示下一个图像

Question

我有一系列图像，其类为 .piece，位于名为 #pieces 的 div 中。最初仅显示第一个图像 #piece0，当您单击 #piece0 时，#piece1 将显示在 #piece0 之上。然后，当您单击 #piece1 时，#piece2 会出现在顶部。我当前的代码没有这样做。我该如何解决这个问题？

<div id="pieces">
    <img class="piece" id="piece0" style="display:block;"/>
    <img class="piece" id="piece1" style="display:none;"/>
    <img class="piece" id="piece2" style="display:none;"/>
    <img class="piece" id="piece3" style="display:none;"/>
</div> 

<script>
    var pieceNum = $("#pieces").children().size();
    var i = 0;
    if (i < pieceNum) {
        $("#piece" + i).click(function({
            i++;
            $("piece" + i).css("display", "block");
        }));
    }
</script>

Answer 1

如果您想获取元素子元素的 size(length) ，请使用 $("#pieces img").length 。但对于你的问题来说这是没有必要的。

您可以通过 $("pieces img").on("click".. 捕获图像点击，并通过 .next() 获取下一个元素，然后获取最后一个元素元素没有 next ，对于这种情况，您可以通过 next().length 检查。如果下一个元素不存在，则返回 0

$("#pieces img").on("click",function() { 
     $(this).next().show();
     $("#pieces").append($(this));  
 });

#pieces {
  display: flex;
  flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pieces">
    <img class="piece" id="piece0" style="display:block;" alt="one"/>
    <img class="piece" id="piece1" style="display:none;" alt="two"/>
    <img class="piece" id="piece2" style="display:none;" alt="three"/>
    <img class="piece" id="piece3" style="display:none;" alt="four"/>
</div>