如何在單頁應用程序中的照片之間交換？

Question

我連續有4張縮略圖，每張圖像都與另外4張圖像相關，並向我解釋：主要的4張圖像是游戲中的角色（戰士，劍客等），我想單擊戰士圖像並繼續前進在與戰士裝備頁面相同的頁面中（裝甲，靴子武器等）。 我在這里嘗試了很多方法，但仍然沒有成功。 有人可以幫我嗎？

 count = 1; total = 4; $(".img-swap1").on('click', function() { $(this).fadeOut(400, function() { $(this).attr('src', 'images/swordsman' + count + '.jpg'); }).fadeIn(400); count++; if (count > total) { count = 1; } }); 

 .column { float: left; width: 18%; padding: 14px; } img { display: block; margin-left: auto; margin-right: auto; max-width: 40%; height: auto; } /* Clear floats after image containers */ .row::after { content: ""; clear: both; display: table; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="column"> <img src="images/swordsman.jpg" class="img-swap1" alt="Swordsman" style="width:100%"> </div> <div class="column"> <img src="images/Mage-0.png" class="img-swap" alt="Mage" style="width:100%"> </div> <div class="column"> <img src="images/Warrior-0.png" class="img-swap" alt="Warrior" style="width:100%"> </div> <div class="column"> <img src="images/GhostFighter-0.png" class="img-swap" alt="GhostFighter" style="width:100%"> </div> </div> 

Answer 1

我建議您使用對象數組，其中既包含：圖像的鏈接，又包含子集的名稱。

這樣，為了將來，您可以簡單地從json獲取數組。

實現方式如下：

 var sets = []; sets['default'] = [ { link: "https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706547.jpg", set: "swordsman" }, { link: "https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706535.jpg", set: "swordsman" }, { link: "https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1221331996.jpg", set: "swordsman" }, { link: "https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706532.jpg", set: "swordsman" } ]; sets['swordsman'] = [ { link: "https://image.shutterstock.com/image-illustration/hero-swordsman-bright-armor-medieval-450w-1288381915.jpg", set: "default" }, { link: "https://image.shutterstock.com/image-illustration/hero-swordsman-bright-armor-medieval-450w-1288381921.jpg", set: "default" }, { link: "https://image.shutterstock.com/image-illustration/hero-swordsman-bright-armor-medieval-450w-1288381924.jpg", set: "default" }, { link: "https://image.shutterstock.com/image-illustration/hero-swordsman-bright-armor-medieval-450w-1288381930.jpg", set: "default" } ]; $(".img-swap").click(function() {replaceImgSet(this);}); function replaceImgSet(obj) { var _clicked_elem = obj; $(obj).parent().parent().fadeOut(400, function() { var rset = $(_clicked_elem).data("set"); var rowdiv = $(obj).parent().parent(); rowdiv.children(".column").remove(); sets[rset].forEach(function(elem) { var imgdiv = $('<div class="column"></div>'); var img = $('<img src="'+elem.link+'" data-set="'+elem.set+'" class="img-swap" alt="Mage" style="width:100%">'); img.click(function() {replaceImgSet(this)}); $(rowdiv).append(imgdiv.append(img)); }); $(rowdiv).fadeIn(); }); } 

 .column { float: left; width: 18%; padding: 14px; } img { display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; } /* Clear floats after image containers */ .row::after { content: ""; clear: both; display: table; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="column"> <img src="https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706547.jpg" class="img-swap" data-set="swordsman" alt="Swordsman" style="width:100%"> </div> <div class="column"> <img src="https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706535.jpg" class="img-swap" data-set="swordsman" alt="Mage" style="width:100%"> </div> <div class="column"> <img src="https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1221331996.jpg" class="img-swap" data-set="swordsman" alt="Warrior" style="width:100%"> </div> <div class="column"> <img src="https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706532.jpg" class="img-swap" data-set="swordsman" alt="GhostFighter" style="width:100%"> </div> </div>