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

Question

我在名为 #pieces 的 div 中有一系列带有 .piece class 的图像。最初只显示第一张图片 #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

试试这个：

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

Answer 2

您不需要编写多个点击事件，您可以将单击事件附加到所有元素并使用 .next() 进行遍历以显示下一个元素：

 $(".piece").click(function({
        var $nextPiece = $(this).next();
        if($nextPiece.length > 0)
            $nextPiece.css("display", "block");
 }));

Answer 3

$(document).ready(function(){
 var pieceNum = $("#pieces").children();
 var i = 0;
    if (i < pieceNum.length) {
        $("#piece" + i).click(function(){ 
            $("#piece" + i).css("display", "none");
            i++;
             $("#piece" + i).css("display", "block");
     
        });
    }

  
})

<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;" src="http://placekitten.com/g/200/300"/>
    <img class="piece" id="piece1" style="display:none;" src="http://placekitten.com/g/200/400"/>
    <img class="piece" id="piece2" style="display:none;" src="http://placekitten.com/g/200/300"/>
    <img class="piece" id="piece3" style="display:none;" src="http://placekitten.com/g/200/100"/>
</div>

Answer 4

您可以使用 next() 访问下一个 child 和 show() 来显示 img。此外，您还需要添加 position: absolute; 以使图像相互重叠。

$(document).ready(function() {
  $('.piece').on('click', function() {
    $(this).next().show();
  });
});

img {
  max-width: 100px;
  margin-right: 1em;
  position: absolute;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div id="pieces">
  <img class="piece" src="https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_mfit/w_700/sample.jpg" />
  <img class="piece" src="https://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg" style="display:none;" />
  <img class="piece" src="https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_mfit/w_700/sample.jpg" style="display:none;" />
  <img class="piece" src="https://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg" style="display:none;" />
</div>

Answer 5

如果你想获得子元素的大小（长度），使用 $("#pieces img").length 。但对于你的问题，那是没有必要的。

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

$("#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>

Answer 6

试试这个

$(".piece").on('click', function(){
   $(".piece").hide();

   let id = (parseInt(this.id.slice(-1)) +1)%4;
     $("#piece" +id).show();

});

<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="piece 0"/>
    <img class="piece" id="piece1" style="display:none;" alt="piece 1"/>
    <img class="piece" id="piece2" style="display:none;" alt="piece 2"/>
    <img class="piece" id="piece3" style="display:none;" alt="piece 3"/>
</div>

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

Show next image on top of the current image with JavaScript/jQuery

html

javascript

jquery

click