javascript - jQuery-反向 Action

首先，我知道代码很丑陋，但是我是JS的初学者，所以请理解我。

这是我到目前为止所做的。我该怎么办？一步步：


单击＃img1，然后循环启动...
＃img1从绿色变为红色图像，而＃text1也从绿色变为红色。
然后过了一段时间＃img1和＃text1也返回默认值（全部为绿色）
＃img2和＃text2都一样（自动，无需单击）
最后的＃img5和＃text5都相同


每次更换之间应暂停几秒钟。请帮我！

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

最佳答案

循环之前，只需将绿色圆圈和文本应用于元素。我也清除了你的代码

工作解决方案：

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>

这也是可行的解决方案，但我像上面所做的那样编写它：

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