动态交换 IMG-SRC 与另一个图像？答案

【问题标题】：Swap IMG-SRC with another Image dynamically?动态交换 IMG-SRC 与另一个图像？
【发布时间】：2021-11-20 16:28:14
【问题描述】：

原谅我，用 jQuery 搞清楚任何东西已经有一段时间了，我需要一些指导/帮助：我很想将图像 00x-a 换成 00x-b，但不仅仅是单个图像，而是许多。单击 IMG 下方的 BTN 后，我希望将上面的 IMG 交换为 00x-b，同时将其他 IMG 重置为 00x-a。

<div>
    <img id="swap_this" src="img-001-a.jpg">
    <a class="button">Change-IMG</a>
</div>

<div>
    <img id="swap_this" src="img-002-a.jpg">
    <a class="button">Change-IMG</a>
</div>

<div>
    <img id="swap_this" src="img-003-a.jpg">
    <a class="button">Change-IMG</a>
</div>

<script type="text/javascript">
    
    jQuery(document).ready(function($) {

        $(".button").click(function(){
            $("#swap_this").attr()({
                "src":"img-001-b.jpg";
            })
        })

    });

</script>

【问题讨论】：

标签： javascript html jquery image swap

【解决方案1】：

应该这样做。只有第一张图片设置为img-001-a.jpg

var arr = ['img-001-a.jpg', 'img-002-a.jpg', 'img-003-a.jpg']

$.each($('.swap_this'), function(index, value) {
  if(index == 0) {
     $(this).attr('src', arr[0])
     console.log($(this).attr('src'));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <img class="swap_this" src="img-001-b.jpg">
  <a class="button">Change-IMG</a>
</div>

<div>
  <img class="swap_this" src="img-002-b.jpg">
  <a class="button">Change-IMG</a>
</div>

<div>
  <img class="swap_this" src="img-003-b.jpg">
  <a class="button">Change-IMG</a>
</div>

【讨论】：

谢谢！这将帮助我开始。似乎这会将所有（！）IMG“重置”为版本-b（通过将ARRAY更新为-a来修复）。但是我仍然需要添加一个静态函数来将 BTN 上方的一个特定 IMG 更改为 ver -b……我会继续探索这个，谢谢……
更新了我的答案。检查它并投票或检查答案。所以我会得到一些分数。 THX
虽然不能解决我想要做的事情。您能否在下面的 for 循环中达到顶峰，那里也需要一些帮助吗？谢谢。

【解决方案2】：

试图跟进您的答案，但最终得到了其他结果。下面是我需要的，但是可以用“每个”编写还是使用for循环来迭代？谢谢。

// clicking btn_100
$('.btn_100').click(function(e) {

    // reset all IMG to version -a.gif..
    $(".img_100").attr('src','img-100-a.gif');
    $(".img_099").attr('src','img-099-a.gif');
    $(".img_098").attr('src','img-098-a.gif');
    // set IMG_100 ver -b.gif..
    $(".img_100").attr('src','img-100-b.gif');

});

// clicking btn_099
$('.btn_099').click(function(e) {

    // reset all IMG to version -a.gif..
    $(".img_100").attr('src','img-100-a.gif');
    $(".img_099").attr('src','img-099-a.gif');
    $(".img_098").attr('src','img-098-a.gif');
    // set IMG_100 ver -b.gif..
    $(".img_099").attr('src','img-099-b.gif');

});

// and so on..

【讨论】：

【解决方案3】：

也许这可行……

for(a=1; a<=100; a++) {

    // create fns for all btns
    $(".btn_" + a).click(function(e) {

        // reset all IMG to version -a.gif..
        for(i=1; i<=100; i++) {
            $(".img_" + i).attr("src","image-" + i + "-a.gif");
        }

        // set specific IMG to version -b.gif..
        $(".img_" + a).attr("src","image-" + a + "-b.gif");

    });

}

【讨论】：

仍然需要一些帮助：-a 工作正常，-b 不行。这与嵌套的 for 循环有关吗？任何想法表示赞赏......谢谢。
如果我硬连线 -b，它可以工作；所以不接收和迭代 var a...！？