CODEWITHSUNDEEP
javascriptjqueryfunction
ZAM666
ZAM666

Reputation: 31

jQuery - reverse action

First of all I know that the code is ugly, but I am a beginner with JS, so please understand me.

This is what I have done to this time. What I have to do? Step by step:

  1. click on #img1 and then loop start...
  2. #img1 change from green to red image and #text1 too (from green to red)
  3. then after some time #img1 and #text1 back too default values (all green)
  4. #img2 and #text2 do all the same (automatic, without click)
  5. all the same to the last #img5 and #text5

Between changing every li should be few seconds pause. Please help me!

HTML:

<ul>
  <li class="li-1"><img id="img1" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /><p id="text1">Text</p></li>
  <li class="li-2"><img id="img2" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /><p id="text2">Text</p></li>
  <li class="li-3"><img id="img3" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /><p id="text3">Text</p></li>
  <li class="li-4"><img id="img4" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /><p id="text4">Text</p></li>
  <li class="li-5"><img id="img5" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /><p id="text5">Text</p></li>
</ul>

jQuery:

var count = 0;
function images() {
  if (count == 0) {
    $('#img1').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
    $('#text1').css('color', 'red');
    count++;
  } else if (count == 1) {
    $('#img2').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
    $('#text2').css('color', 'red');
    count++;
  } else if (count == 2) {
    $('#img3').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
    $('#text3').css('color', 'red');
    count++;
  } else if (count == 3) {
    $('#img4').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
    $('#text4').css('color', 'red');
    count++;
  } else if (count == 4) {
    $('#img5').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
    $('#text5').css('color', 'red');
    count++;
  }
}
setInterval(images, 1000);


var count = 0;

function images() {
  if (count == 0) {
    $('#img1').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
    $('#text1').css('color', 'red');
    count++;
  } else if (count == 1) {
    $('#img2').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
    $('#text2').css('color', 'red');
    count++;
  } else if (count == 2) {
    $('#img3').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
    $('#text3').css('color', 'red');
    count++;
  } else if (count == 3) {
    $('#img4').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
    $('#text4').css('color', 'red');
    count++;
  } else if (count == 4) {
    $('#img5').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
    $('#text5').css('color', 'red');
    count++;
  }
}
setInterval(images, 1000);
ul {
  padding: 0 250px;
  margin-left: 100px;
  display: flex;
}
ul .li-1 {
  list-style: none;
  margin-right: 10px;
}
ul .li-1 img {
  width: 100px;
}
ul .li-1 p {
  padding: 0;
  margin: 0;
  color: #00875b;
  font-size: 38.89px;
  text-align: center;
  text-transform: uppercase;
}
ul .li-2 {
  list-style: none;
  margin-right: 10px;
}
ul .li-2 img {
  width: 100px;
}
ul .li-2 p {
  padding: 0;
  margin: 0;
  color: #00875b;
  font-size: 38.89px;
  text-align: center;
  text-transform: uppercase;
}
ul .li-3 {
  list-style: none;
  margin-right: 10px;
}
ul .li-3 img {
  width: 100px;
}
ul .li-3 p {
  padding: 0;
  margin: 0;
  color: #00875b;
  font-size: 38.89px;
  text-align: center;
  text-transform: uppercase;
}
ul .li-4 {
  list-style: none;
  margin-right: 10px;
}
ul .li-4 img {
  width: 100px;
}
ul .li-4 p {
  padding: 0;
  margin: 0;
  color: #00875b;
  font-size: 38.89px;
  text-align: center;
  text-transform: uppercase;
}
ul .li-5 {
  list-style: none;
}
ul .li-5 img {
  width: 100px;
}
ul .li-5 p {
  padding: 0;
  margin: 0;
  color: #00875b;
  font-size: 38.89px;
  text-align: center;
  text-transform: uppercase;
}
img {
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="li-1">
    <img id="img1" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" />
    <p id="text1">Text</p>
  </li>
  <li class="li-2">
    <img id="img2" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" />
    <p id="text2">Text</p>
  </li>
  <li class="li-3">
    <img id="img3" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" />
    <p id="text3">Text</p>
  </li>
  <li class="li-4">
    <img id="img4" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" />
    <p id="text4">Text</p>
  </li>
  <li class="li-5">
    <img id="img5" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" />
    <p id="text5">Text</p>
  </li>
</ul>

<!-- Change to this image -->
<img src="http://www.freeiconspng.com/uploads/red-circle-icon-1.png" />

Upvotes: 0

Views: 489

Answers (2)

Aleksandar Đokić
Aleksandar Đokić

Reputation: 2333

You just have to apply green circle and text to element before when you are looping. I cleared your code a bit as well

Working solution:

var count = 0;
function images() {
  if (count == 0) {
    toRed('#img1','#text1');
    count++;
  } else if (count == 1) {
    toRed('#img2','#text2');
    toGreen('#img1','#text1');
    count++;
  } else if (count == 2) {
    toRed('#img3','#text3');
    toGreen('#img2','#text2');
    count++;
  } else if (count == 3) {
    toRed('#img4','#text4');
    toGreen('#img3','#text3');
    count++;
  } else if (count == 4) {
    toRed('#img5','#text5');
    toGreen('#img4','#text4');
    count++;
  }
}
$('#img1').on('click',function() {
  setInterval(images, 1000);
});

function toGreen(image, text) {
    $(image).attr('src', "http://www.freeiconspng.com/uploads/green-circle-icon-28.png");
    $(text).css('color', 'green');
}
function toRed(image, text) {
    $(image).attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
    $(text).css('color', 'red');
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<ul>
  <li class="li-1"><img width = '50px' id="img1" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /><p id="text1">Text</p></li>
  <li class="li-2"><img width = '50px' id="img2" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /><p id="text2">Text</p></li>
  <li class="li-3"><img width = '50px' id="img3" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /><p id="text3">Text</p></li>
  <li class="li-4"><img width = '50px' id="img4" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /><p id="text4">Text</p></li>
  <li class="li-5"><img width = '50px' id="img5" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /><p id="text5">Text</p></li>
</ul>
</body>
</html>

This is working solution also, but i wrote it like u did above:

var count = 0;
function images() {
  if (count == 0) {
    $('#img1').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
    $('#text1').css('color', 'red');
    count++;
  } else if (count == 1) {
    $('#img2').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
    $('#text2').css('color', 'red');

    $('#img1').attr('src', "http://www.freeiconspng.com/uploads/green-circle-icon-28.png");
    $('#text1').css('color', 'green');
    count++;
  } else if (count == 2) {
    $('#img3').attr('src', "http://www.freeiconspng.com/uploads/green-circle-icon-28.png");
    $('#text3').css('color', 'red');

    $('#img2').attr('src', "http://www.freeiconspng.com/uploads/green-circle-icon-28.png");
    $('#text2').css('color', 'green');
    count++;
  } else if (count == 3) {
    $('#img4').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
    $('#text4').css('color', 'red');

    $('#img3').attr('src', "http://www.freeiconspng.com/uploads/green-circle-icon-28.png");
    $('#text3').css('color', 'green');
    count++;
  } else if (count == 4) {
    $('#img5').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
    $('#text5').css('color', 'red');

    $('#img4').attr('src', "http://www.freeiconspng.com/uploads/green-circle-icon-28.png");
    $('#text4').css('color', 'green');
    count++;
  }
}
setInterval(images, 1000);

Upvotes: 1

Nick Parsons
Nick Parsons

Reputation: 50684

You can accomplish what you want by using your counter. By storing a temp variable and using that to set your previous image back to green you can make your code a lot smaller.

// Create variables in global scope
var count;
var temp;
var interval;
var click = true;
function images() {
  // Chnage to red
  $('#img' +(count)).attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
  $('#text' +(count)).css('color', 'red');
  
  // Turn back to green
  $('#img' +(temp)).attr('src', "http://www.freeiconspng.com/uploads/green-circle-icon-28.png");
  $('#text' +(temp)).css('color', 'green');

  if(temp == 5){ // If we have completed the entire cycle then stop the interval. Set to 5 becuase there are 5 images
    clearInterval(interval);
    click = true; // Cycle has finished so we can allow users to click on the image
  }
temp = count;
count++;
}

$('#img1').click(function(){
  if(click){ // This stops people from spamming the image button and breaking the pattern
  // Set count equal to 1 since your first div has and id of #img1 
  count = 1;
  // Set temp equal to zero as it has to be one less than your counter value to set the previous value back to the green image
  temp = 0;
  // setInterval is now assigned to a variable to we can stop the intervals latter if we want to be able to do the same action again when we click on the first image...
  interval = setInterval(images, 1000);
    click = false; // Set click to false so they can't click anymore
 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="li-1"><img id="img1" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /><p id="text1">Text</p></li>
  <li class="li-2"><img id="img2" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /><p id="text2">Text</p></li>
  <li class="li-3"><img id="img3" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /><p id="text3">Text</p></li>
  <li class="li-4"><img id="img4" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /><p id="text4">Text</p></li>
  <li class="li-5"><img id="img5" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /><p id="text5">Text</p></li>
</ul>

If you read the documentation you should be able to understand what is going on. Here is a codepen to see the changes with your css/sass: http://codepen.io/clapynick/pen/LkmyqK

Upvotes: 0

Related Questions