How to create a loop for the following code?-CodePudding

I wrote the following code:

$("#img1").add("#label1").fadeIn();
$("#img1").click(function() {
  $(this).attr("src", "/abc/xyz.png");
  $("#content1").add("#img2").add("#label2").fadeIn(1000);
});

When I click on img2, the image source ishould change and content2 as well as img3 / label3 should be displayed.When I reach img5, just content5 should be displayed and the function should end.

Without a loop the function works fine - but its a lot of code...

I tried to build an Array and loop through it with a for loop, but somehow I always fail.

$("#img1").add("#label1").fadeIn();
var turn = [1, 2, 3, 4]

for (var i = 1; i <= turn; i  ) {
  $("#img"   turn).click(function() {
    $(this).attr("src", "/abc/xyz.png");
    $("#content"   turn).add("#img"   (turn   1)).add("#label"   (turn   1)).fadeIn(1000);
  });
}

$("#img5").click(function() {
  $(this).attr("src", "/abc/xyz.png.png");
  $("#content5").fadeIn(1000);
});

I would be very happy if you could provide some input for beginners: )

Here is some of the html-code where it should be used:

    .check{
    display: none; 
}
.container{
    display:flex;
    flex: space-evenly;
}

.box {
    flex: 0 0 170px;
}
.content{
    flex: 2 1 50px;
    display:none;
    text-align: left;
}
img{
    cursor:pointer;
    float: left;
    display: none;
}
label{
    display: none;
}
.pic{
    cursor: context-menu;
}

<div >
<div >
    <input type="checkbox" id="Einltg_Var1" >
    <p>
        <label for="Einltg_Var1" id="label1">
            <img src="/abc/abc.png" id="img1" > Step1
        </label>
    </p>
</div>
<div  id="content1">
    <p>Content1</p>
</div>

<div >
<div >
    <input type="checkbox" id="Einltg_Var2" >
    <p>
        <label for="Einltg_Var2" id="label2">
            <img src="/abc/abc.png" id="img2">Step2
        </label>
    </p>
</div>
<div  id="content2">
    <p>Content2.</p>
</div>

CodePudding user response：

It's a bit unclear what you want 100%. but if you want a click function that works with all, try something like this:

$("img[id^=img]").click(function() {
  var idnumber =  $(this).attr("id").replace("img", "");
  $(this).attr("src", "/abc/xyz.png");
  $("#content"   idnumber).add("#img"   (idnumber   1)).add("#label"   (idnumber   1)).fadeIn(1000);
});

Demo

$("img[id^=img]").click(function() {
  var idnumber =  $(this).attr("id").replace("img", "");
  $(this).attr("src", "/abc/xyz.png");
  $("#content"   idnumber).add("#img"   (idnumber   1)).add("#label"   (idnumber   1)).fadeIn(1000);
});

.check {
  display: none;
}

.container {
  display: flex;
  flex: space-evenly;
}

.box {
  flex: 0 0 170px;
}

.content {
  flex: 2 1 50px;
  display: none;
  text-align: left;
}

img {
  cursor: pointer;
  float: left;
}

label {
}

.pic {
  cursor: context-menu;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <input type="checkbox" id="Einltg_Var1" >
    <p>
      <label for="Einltg_Var1" id="label1">
            <img src="/abc/abc.png" id="img1" alt="img1"> Step1
        </label>
    </p>
  </div>
  <div  id="content1">
    <p>Content1</p>
  </div>
</div>

<div >
  <div >
    <input type="checkbox" id="Einltg_Var2" >
    <p>
      <label for="Einltg_Var2" id="label2">
            <img src="/abc/abc.png" id="img2" alt="img2"> Step2
        </label>
    </p>
  </div>
  <div  id="content2">
    <p>Content2</p>
  </div>
</div>

<div >
  <div >
    <input type="checkbox" id="Einltg_Var3" >
    <p>
      <label for="Einltg_Var3" id="label3">
            <img src="/abc/abc.png" id="img3" alt="img3"> Step3
        </label>
    </p>
  </div>
  <div  id="content3">
    <p>Content3</p>
  </div>
</div>

CodePudding user response：

In a loop, you should replace turn with i, and also turn should be an integer not an array. Here is the correction.

$("#img1").add("#label1").fadeIn();
var turn = 4;

for (var i = 1; i <= turn; i  ) {
  $("#img"   i).click(function() {
    $(this).attr("src", "/abc/xyz.png");
    $("#content"   i).add("#img"   (i   1)).add("#label"   (i   1)).fadeIn(1000);
  });
}

$("#img5").click(function() {
  $(this).attr("src", "/abc/xyz.png.png");
  $("#content5").fadeIn(1000);
});