回复：迭代 for 循环，交换 100 个 BTN 和 IMG

Posted 2023-03-16

【中文标题】回复：迭代 for 循环，交换 100 个 BTN 和 IMG

【英文标题】：Re: Iterating for-loop, swapping 100 BTNs and IMGs

【发布时间】：2021-11-22 06:04:38

【问题描述】：

昨天开始this thread，标记为已解决！谢谢。

想要在 IMG 下方的 BTN 中添加一些功能：单击 BTN 应该 a) 完成解决方案已经完成的所有操作 b) 将 BTN .text("some_text") 和 addClass ("some_css") 更改为 BTN .重新单击相同的按钮应该会自行重置。单击另一个 BTN 也需要重置所有内容。下面的想法可行，但我觉得应该更优雅地解决它。

$(document).ready(function() 

    $('.btn').on("click", function() 

        if ($(this).hasClass("playing")) 

            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) ? "a" : "a"
                $img.attr("src", `image-$imgIndex-$suffix.gif`);
            );

            // resets ALL BTNs text
            $(".btn").text("Play Animation");
            // resets ALL BTNs css
            $(".btn").removeClass("btn_state_active");
            // resets ALL BTNs incl. THIS one to "not-playing"..
            $(".btn").removeClass("playing");

         else 

            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", `image-$imgIndex-$suffix.gif`);
            );

            // resets ALL BTNs text
            $(".btn").text("Play Animation");
            // resets ALL BTNs css
            $(".btn").removeClass("btn_state_active");
            // resets ALL BTNs incl. THIS one to "not-playing"..
            $(".btn").removeClass("playing");

            // updates THIS BTNs text
            $(this).text("Stop Animation");
            // updates THIS BTNs css
            $(this).addClass("btn_state_active");
            // changes/updates THIS BTNs status
            $(this).addClass("playing");

        

    );

);

【参考方案1】：

最重要的是 DRY（不要重复自己！）。这意味着在这种情况下找到“通用”功能并始终这样做，然后找到特定功能，并在必要时执行它

你总是这样做

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", `image-$imgIndex-$suffix.gif`);
);

// resets ALL BTNs text
$(".btn").text("Play Animation");
// resets ALL BTNs css
$(".btn").removeClass("btn_state_active");
// resets ALL BTNs incl. THIS one to "not-playing"..
$(".btn").removeClass("playing");

只有当当前按钮没有 playing 类时，你才需要这样做：

// updates THIS BTNs text
$(this).text("Stop Animation");
// updates THIS BTNs css
$(this).addClass("btn_state_active");
// changes/updates THIS BTNs status
$(this).addClass("playing");

那就这样做吧！

$(document).ready(function() 

    $('.btn').on("click", function() 
        const $this = $(this); // DRY!!
        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", `image-$imgIndex-$suffix.gif`);
        );

        // Do this before resetting all buttons
        const isPlaying = $this.hasClass("playing");

        // remember DRY!
        const $allBtns = $('.btn');
        // resets ALL BTNs text
        $allBtns.text("Play Animation");
        // resets ALL BTNs css
        $allBtns.removeClass("btn_state_active");
        // resets ALL BTNs incl. THIS one to "not-playing"..
        $allBtns.removeClass("playing");

        if (!isPlaying)            

            // updates THIS BTNs text
            $this.text("Stop Animation");
            // updates THIS BTNs css
            $this.addClass("btn_state_active");
            // changes/updates THIS BTNs status
            $this.addClass("playing");

        

    );

);

下面的实例

$('.btn').on("click", function() 
  const $this = $(this); // DRY!!
  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", `image-$imgIndex-$suffix.gif`);
  );

  // Do this before resetting all buttons
  const isPlaying = $this.hasClass("playing");

  // remember DRY!
  const $allBtns = $('.btn');
  // resets ALL BTNs text
  $allBtns.text("Play Animation");
  // resets ALL BTNs css
  $allBtns.removeClass("btn_state_active");
  // resets ALL BTNs incl. THIS one to "not-playing"..
  $allBtns.removeClass("playing");

  if (!isPlaying) 

    // updates THIS BTNs text
    $this.text("Stop Animation");
    // updates THIS BTNs css
    $this.addClass("btn_state_active");
    // changes/updates THIS BTNs status
    $this.addClass("playing");

  

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn" data-index="100">Play Animation</button>
<button class="btn" data-index="99">Play Animation</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">

【讨论】：

谢谢。我觉得自己是一个完整的初学者/学习者，这很棒，但是……！isPlaying 还需要将上面的图像重置为 -a……？

@plbr 对不起，我不明白这个问题。

哦，等等，也许我知道 - 你为什么改成const suffix = (btnIndex == imgIndex) ? "a" : "a"？我没注意到

我试过了，因为点击同一个 BTN 两次会重置 BTN 本身，但不会重置 IMG……所以我尝试（冗余）将 $('.img').each() 添加到 !isPlaying，但是用 "b" : "a"…