使用 for 循环设置属性但只获取最后一个值

Question

我正在尝试编写一个代码来自动生成按钮，每个按钮都包含一个图像（照片）。

我想象的是构建一个特定数字的数组来匹配图像文件名，然后使用 for 循环将这些数字放入源属性中。 我得到的是所有按钮的最后一个图像，但控制台日志确实输出了每个数字，我会尝试 forEach 循环也有相同的结果。

请指导我解决您在以下代码中看到的任何问题。

HTML：

<div class="warp">
    <main class="houseFlat">
        <div>
            <h1>平面圖</h1>
            <img src="images/flat.svg" alt="Not found">
        </div>
        
    </main>

    <aside class="rooms">
        <h1 class="font-color">房間配備</h1>
        <div class="info font-color">
            WIFI 機上盒 螢幕 書桌 椅子 床鋪 衣櫥 冷氣
            A室7坪，B室6坪，C室3.5坪，D室8.5坪，E室3坪
        </div>
        
        <h1 class="font-color">地圖</h1>
        <div class="map">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3642.9838607597326!2d120.54495771537542!3d24.066872882528724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3469395bcc5c6775%3A0x9125cf5bce6a2584!2zNTAw5b2w5YyW5Y6_5b2w5YyW5biC5LuL5aO95Y2X6LevNjnlt7c05byENeiZnw!5e0!3m2!1szh-TW!2stw!4v1598363699365!5m2!1szh-TW!2stw" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
        </div>
    </aside>
</div>

<div class="img_preview">
</div>

<div id="dialog">
        <div class="room room_a">
            <div class="popup">A
                <button class="close">X</button>
                <div class="photos">
                    <!--image slider here-->
                </div>
            </div>
        </div>

</div>

<div class="forFooter"></div>
<script src="jQuery/jquery.min.js"></script>
<script src="js/effects.js"></script>

Javascript/jQuery：

$(document).ready(function(){ //導入頁淡入特效

$(function(){//移植header
    $(".forHeader").load("header.html");
});

$(function(){//移植footer
    $(".forFooter").load("footer.html");
});

   /*spawn buttons*/
    var num= 25;
    var source= "images/house_JS";

    for(var i=1; i<=num; i++){
        $(".img_preview").append("<button class='btn'><a><img></a></button>");
    } 
    
    var setnum= [], j, split; 
    for(j=1; j<=num; j++){ //generate 01,02,03....25
        split = ('0'+j).slice(-2);
        setnum.push(split);
        console.log(setnum);
    }

    setnum.forEach((nums)=>{ //get numbers and use them as image source
        console.log(nums);
        $("button > a > img").attr('src', source + nums +'.jpg');
    });  

});

Answer 1

$("button > a > img").attr('src', source + nums +'.jpg');

每次运行时，这都会影响 ALL button > a > img标签。 此外，您的所有 3 个循环都在做不同的事情，应该在同一个循环中完成。

https://jsfiddle.net/5foj43mp/3/

var num= 25;
var source= "images/house_JS";

for(var i=1; i<=num; i++){
  $(".img_preview").append("<button class='btn'><a><img src='"+source + ('0'+i).slice(-2) +".jpg'></a></button>");
}

Answer 2

var num= 25;
var source= "images/house_JS"; //no need of this variable

let i=1;
while(i<=num){
  let index = ('0' + i).slice(-2);
  $(".img_preview").append(`<button class='btn'><img src="images/house_JS${index}.jpg"></a></button>`)
  i++;
}