Question 36657 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to create a loop for the following code? – Jquery

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 class="container">
<div class="box">
    <input type="checkbox" id="Einltg_Var1" class="check">
    <p>
        <label for="Einltg_Var1" id="label1">
            <img src="/abc/abc.png" id="img1" > Step1
        </label>
    </p>
</div>
<div class="content" id="content1">
    <p>Content1</p>
</div>

<div class="container">
<div class="box">
    <input type="checkbox" id="Einltg_Var2" class="check">
    <p>
        <label for="Einltg_Var2" id="label2">
            <img src="/abc/abc.png" id="img2">Step2
        </label>
    </p>
</div>
<div class="content" id="content2">
    <p>Content2.</p>
</div>
Tags:

2

Answers


  1. 0

    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);
});
    Login or Signup to reply.
  2. 0

    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 class="container">
  <div class="box">
    <input type="checkbox" id="Einltg_Var1" class="check">
    <p>
      <label for="Einltg_Var1" id="label1">
            <img src="/abc/abc.png" id="img1" alt="img1"> Step1
        </label>
    </p>
  </div>
  <div class="content" id="content1">
    <p>Content1</p>
  </div>
</div>

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

<div class="container">
  <div class="box">
    <input type="checkbox" id="Einltg_Var3" class="check">
    <p>
      <label for="Einltg_Var3" id="label3">
            <img src="/abc/abc.png" id="img3" alt="img3"> Step3
        </label>
    </p>
  </div>
  <div class="content" id="content3">
    <p>Content3</p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search