如何有效地循环遍历两个不同元素的类和id

Question

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

JS小提琴：https://jsfiddle.net/jlw01/aj6e769k/

＆＃13;

＆＃13;

$('.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()
    }

  });

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以按照以下想法简化JavaScript代码段。

1. 找到课程并获取最后一个角色
2. 如果小于3
，则递增最后一个字符值
3. 检查条件并按要求开展工作。

FIDDLE DEMO

示例：

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

$("#myButton").click(function() {
  var lastChar = $("#myImage").attr("class").slice(-1),
    nxt = +lastChar < 3 ? (+lastChar) + 1 : 0;
  if ($("#myImage").hasClass("tint" + lastChar)) {
    $("#myImage").removeClass("tint" + lastChar).addClass("tint" + nxt);
    $("#text" + lastChar).hide();
    $("#text" + nxt).show();
  }
});
＆＃13;
#rect1 {
  width: 100px;
  height: 100px;
}
.tint0 {
  fill: orange !important;
}
.tint1 {
  fill: red !important;
}
.tint2 {
  fill: pink !important;
}
.tint3 {
  fill: purple !important;
}
a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
  margin-bottom: 2em;
}
a:hover {
  background-color: gray;
  color: black;
}
#myButton {
  background-color: #e5e5e5;
  color: black;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

如果您不想或不能更改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块。由于这些只是类名和元素ID的数量不同，我使用${n}和${(n + 1) % 4}对数字进行参数化。