javascript - 如何有效地循环访问两个不同元素的类和 id

Question

我试图遍历正在添加和删除到元素的类，同时还遍历隐藏和显示另一个元素。下面是我拥有的有效代码，但并不理想。你如何简化这个？

JS fiddle :https://jsfiddle.net/jlw01/aj6e769k/

$('.textContainer>div').hide().first().show();
$("#myImage").addClass("tint0");

$("#myButton").click(function(){
    if($("#myImage").hasClass("tint0") ){
        $("#myImage").removeClass("tint0")
        .addClass("tint1");
        $("#text0").hide()
        $("#text1").show()
    }
    else if($("#myImage").hasClass("tint1") ){
        $("#myImage").removeClass("tint1")
        .addClass("tint2");
        $("#text1").hide()
        $("#text2").show()
    }
    else if($("#myImage").hasClass("tint2")){
        $("#myImage").removeClass("tint2")
        .addClass("tint3");
        $("#text2").hide()
        $("#text3").show()
    }
    else{
        $("#myImage").removeClass("tint3")
        .addClass("tint0");
        $("#text3").hide()
        $("#text0").show()
    }

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" id="myButton">&#8250;</a>

<div id="myImage">
    <svg>
      <rect id="rect1"/>
    </svg>
</div>

<div class="textContainer">
  <div id="text0">
    <p>Block zero</p>
  </div>
  <div id="text1">
    <p>Block one</p>
  </div>
  <div id="text2">
    <p>Block two</p>
  </div>
  <div id="text3">
    <p>Block three</p>
  </div>
</div>

Answer 1

如果您不想或不能更改您的 HTML 和 CSS，参数化重复的 JavaScript 代码似乎是显而易见的方法。

$('.textContainer>div').hide().first().show();
$("#myImage").addClass("tint0");

$("#myButton").click(function(){
    for (let n = 0; n < 4; n++){
        if($("#myImage").hasClass(`tint${n}`) ){
            $("#myImage").removeClass(`tint${n}`)
            .addClass(`tint${(n + 1) % 4}`);
            $(`#text${n}`).hide();
            $(`#text${(n + 1) % 4}`).show();
            break;
        }
    }
});

在这里，我使用了一个带有简单计数器的循环来代替四个 if/else block 。由于它们仅在类名称和元素 ID 的数量上有所不同，因此我使用 ${n} 和 ${(n + 1) % 4} 参数化了这些数字。