Iterating for-loop, swapping 100 BTNs and IMGs

Question

Need help with a for-loop. I have something like this which I want to simplify:

// 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..

like this maybe:

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

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

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

        // reset btn-TXT
        $(".btn_" + a).text("Play animation");
        $(this).text("Pause animation");

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

    });

};

-a updates fine, -b doesn't. Is that related to the nested for loops? Do I have to pass a to the function? If I hardwire -b (e.g. -99-b), it works; so doesn't receive and iterate var a..!? Thx.

EDIT: need to toggle the BTN-state as well (Play/Stop); tried smth. using a var playing = false and a conditional if-loop.

infamous for loop https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — epascarello, Sep 29 '21 at 17:51

Jamiec · Accepted Answer · 2021-09-29T17:56:41.390

1

Give all of your buttons the same class but with an data-index attribute indicating where number it relates to

<button class="btn" data-index="100">Button 100</button>

so you can just write this once

$('.btn').on("click", function() { 
    const index = $(this).data("index");
    ... some code ... 
});

Next, give all of your images the same class, along with a data-index attribute indicating it's "number"

<img src="whatever.jpg" class="img" data-index="100">

Then you just have to update all at once:

$('.btn').on("click", function() { 
    const btnIndex = $(this).data("index"); // index of the clicked button
    $('.img').each((_,img) => {
      const $img = $(img);
      const imgIndex =$img.data("index");
      const suffix = (btnIndex == imgIndex) ? "b" : "a"
      $img.attr("src", `img-${imgIndex}-${suffix}.gif`);
    })
});

Live example:

$('.btn').on("click", function() { 
    const btnIndex = $(this).data("index"); // index of the clicked button
    $('.img').each((_,img) => {
      const $img = $(img);
      const imgIndex =$img.data("index");
      const suffix = (btnIndex == imgIndex) ? "b" : "a"
      $img.attr("src", `img-${imgIndex}-${suffix}.gif`);
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn" data-index="100">click me (100)</button>
<button class="btn" data-index="99">or me (99)</button>

<img class="img" data-index="100">
<img class="img" data-index="99">
<img class="img" data-index="98">
<img class="img" data-index="97">
<img class="img" data-index="96">

edited Sep 29 '21 at 17:56

answered Sep 29 '21 at 17:41

Jamiec

133,658
13
134
193

Thx so much! I'm not familiar with that writing, so am a bit lost here: it seems to "reset" all images to -a as expected. But I need the one above the BTN to show -b? Also missed to include some TXT that I'd like to update in my original question. – plbr Sep 29 '21 at 17:55
1

@plbr I think you saw this before my update when I realised you were setting one image differently to the rest – Jamiec Sep 29 '21 at 17:56
1

@plbr If you still have dificulty with changing the text on the buttons let me know – Jamiec Sep 29 '21 at 17:59
Thx, again! Had to swap "b" : "a", but can now see that you updated that already as well. I'll try to get that TXT working now… – plbr Sep 29 '21 at 18:11
Ok, need some help with .text() as well. Keen to learn. Thx! – plbr Sep 29 '21 at 18:21
Alright, updating the text of the button was pretty simple. Still keen to learn: if I'd wanted to reset the BTN and IMG when clicking the same BTN a second time (now "Pause" or similar), how would I tackle that? – plbr Sep 29 '21 at 18:57
Tried to add smth. like var = active and another conditional statement, but need more help. Thx so much. – plbr Sep 30 '21 at 09:51
@plbr Im not entire sure I understand what you're trying to add. It would be worth posting a new question with full details - feel free to ping me here and I'll have a look – Jamiec Sep 30 '21 at 10:54
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/237667/discussion-between-plbr-and-jamiec). – plbr Sep 30 '21 at 11:35

Iterating for-loop, swapping 100 BTNs and IMGs

1 Answers1

Linked