Question

我遇到了一些问题，计划是当我点击一个按钮时，图片会改变一个，以表示一个红绿灯序列。因此，当我运行代码时，我希望它以红色开始并运行序列（英国序列）。虽然当我运行代码时，所有我得到的是所有图片同时出现而没有来自按钮的效果。如果有人可以帮助完成这一点，那将非常感谢！：）

干杯！

这是我的HTML代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Traffic Lights</title>
        <link href="flag_style.css" rel="stylesheet" type="text/css">
        <script src="flagscript.js"></script>
    </head>
    <body>
    <input type="button" value="click me" onclick="changeLight()">

    <img id="state_1" onclick="changeLight()" src="http://www.drivingtesttips.biz/images/traffic-light-red.jpg">
    <img id="state_2" onclick="changeLight()" src="http://www.drivingtesttips.biz/images/traffic-lights-red-amber.jpg">
    <img id="state_3" onclick="changeLight()" src="http://www.drivingtesttips.biz/images/traffic-lights-green.jpg">
    <img id="state_3" onclick="changeLight()" src="https://assets.digital.cabinet-office.gov.uk/media/559fbe48ed915d1592000048/traffic-light-amber.jpg">
</body>
</html>

CSS：

.state_1 {
    width:300px;
    height:300px;
}

.state_2 {
    width:300px;
    height:300px;
}

.state_3 {
    width:300px;
    height:300px;
}

.state_4 {
    width:300px;
    height:300px;
}

JavaScript的：

var flagSeq = ["state_1","state_2","state_3","state_4"];

var state = 0;

function changeFlag() {
    if (state == 0) {
        document.getElementById("state_1").className = flagSeq[state][0];   
        state++;
    } 
    if else (state == 1) {
        document.getElementById("state_2").className = flagSeq[state][1];
        state++;
    }
    if else (state == 2) {
        document.getElementById("state_3").className = flagSeq[state][2];
        state++;
    }
    if else (state == 3) {
        document.getElementById("state_4").className = flagSeq[state][3];
        state = 0;
    }
}

Answer 1

我删除了我的其他答案，因为这显然是一个家庭作业问题。我很乐意指出要改进的地方，所以这是我发布的答案中的第一段。

您的代码存在一些问题，我想知道为什么您自己没有注意到其中的一些问题。

您似乎只想一次显示一张图片，但实际上您从未隐藏任何图片。
您提供了图片id属性，但只在CSS中使用了类选择器。
有两个ID为state_3的元素。
if else在JavaScript中无效（控制台很乐意指出语法错误）。你可能打算改为写else if。
正如j08691指出的那样，您定义了一个函数changeFlag，但在HTML中将其称为changeLight。
旁注：对于现实生活中的项目，您最好下载图片并使用这些图片而不是链接到外部资源。

我要做的只有一个img元素并使用JavaScript来更改其src属性。

Answer 2

你想要的是这样的plunker

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Traffic Lights</title>
      <link href="style.css" rel="stylesheet" type="text/css">
      <script src="script.js"></script>
  </head>
  <body>
    <input type="button" value="click me" onclick="changeLight()">
    <div id="light-div" class="light light-0" onclick="changeLight()"></div>
  </body>
</html>


.light {
  width: 300px;
  height: 300px;
  display: block;
  background-position: center center;
  background-repeat: no-repeat;

}

.light-0 {
  background-image: url(http://www.drivingtesttips.biz/images/traffic-light-red.jpg);
}

.light-1 {
  background-image: url(http://www.drivingtesttips.biz/images/traffic-lights-red-amber.jpg);
}

.light-2 {
  background-image: url(http://www.drivingtesttips.biz/images/traffic-lights-green.jpg);
}

.light-3 {
  background-image: url(http://assets.digital.cabinet-office.gov.uk/media/559fbe48ed915d1592000048/traffic-light-amber.jpg);
}


var lightSeq = ['light-0', 'light-1', 'light-2', 'light-3'];
var state = 0;

function changeLight() {
  state++;
  if (state === lightSeq.length)
    state = 0;

  document.getElementById('light-div').className = 'light ' + lightSeq[state];
}

Answer 3

你的代码中HTML / JS确实存在很多错误，首先隐藏一些东西然后更好地尝试显示它 -

我仍然为你找到了一些东西，也许这就是你所需要的，请查看下面的链接 -

$(document).ready(function(e){
    $('#ab').click(function(e){
      //alert(1);
      var a = document.getElementsByTagName('img');
      for(i=1;i<=a.length;i++){
        setTimeout(function(x){
          return (function(){
            $('img#state_'+x).show();  
          });
      }(i),1000*i)
      }
    });
});

https://plnkr.co/XGG5PHI6bMP0XJ484rUS?p=preview

我希望每次单击按钮时都能将每张图片更改为出现在屏幕上的相同位置

3 个答案: