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

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

javascript html css

Javascript 我希望每次单击按钮时都能将每张图片更改为显示在屏幕上相同的位置,javascript,html,css,Javascript,Html,Css,我有一些问题，计划是当我点击一个按钮，图片改变一个一个，以代表一个交通灯序列。因此，当我运行代码时，我希望它以红色开始，并通过序列（英国序列）运行。虽然当我运行代码时，我得到的只是所有图片同时出现，而按钮没有任何效果。如果有人能帮助实现这一点，我们将不胜感激！：）干杯以下是我的HTML代码： <!doctype html> <html> <head> <meta charset="utf-8"> <

我有一些问题，计划是当我点击一个按钮，图片改变一个一个，以代表一个交通灯序列。因此，当我运行代码时，我希望它以红色开始，并通过序列（英国序列）运行。虽然当我运行代码时，我得到的只是所有图片同时出现，而按钮没有任何效果。如果有人能帮助实现这一点，我们将不胜感激！：）

干杯

以下是我的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>

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

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

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

您似乎一次只想显示一个图像，但实际上从未隐藏任何图像
您正在为图像提供
```
id
```
属性，但仅在CSS中使用类选择器
有两个元素的id为
```
state_3
```
```
if-else
```
在JavaScript中无效（控制台很乐意指出语法错误）。您可能打算编写
```
否则，如果改为
```


正如j08691所指出的，您定义了一个函数changefag
，但在HTML中将其称为changeLight
旁注：对于现实生活中的项目，你最好下载图片并使用它们，而不是链接到外部资源



我要做的是只有一个img
元素，并使用JavaScript更改其src
属性。
我删除了我的另一个答案，因为这显然是一个家庭作业问题。不过，我很乐意指出需要改进的地方，所以这里是我发布的答案的第一段

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

您似乎一次只想显示一个图像，但实际上从未隐藏任何图像
您正在为图像提供id
属性，但仅在CSS中使用类选择器
有两个元素的id为state_3
if-else
在JavaScript中无效（控制台很乐意指出语法错误）。您可能打算编写否则，如果改为

正如j08691所指出的，您定义了一个函数changefag
，但在HTML中将其称为changeLight
旁注：对于现实生活中的项目，你最好下载图片并使用它们，而不是链接到外部资源


我要做的是只使用一个img
元素，并使用JavaScript更改其src
属性
你想要的是这样的东西
实际上，你的代码中有很多错误，包括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)
      }
    });
});

$（文档）.ready（函数（e）{
$（'#ab'）。单击（函数（e）{
//警报（1）；
var a=document.getElementsByTagName（'img'）；
对于（i=1；i您的代码中确实有很多错误，无论是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)
      }
    });
});

$（文档）.ready（函数（e）{
$（'#ab'）。单击（函数（e）{
//警报（1）；
var a=document.getElementsByTagName（'img'）；
对于（i=1；i您调用了changeLight（）
，但我看到的只是一个名为changefag（）的函数
你确定要键入if else
，而不是else if
？另外，有两个元素的id为state_3
，而没有一个元素的id为state_4
@j08691。这是我本来打算做的事情，但后来将其编辑为红绿灯，但忘了更改其中的一些，尽管在我的实际代码中，t它们都是用相同的函数调用的flag，它做的事情与我在开始时提到的一样。您调用changeLight（）
，但我看到的只是一个名为changeFlag（）的函数
你确定要键入if else
，而不是else if
？另外，有两个元素的id为state_3
，而没有一个元素的id为state_4
@j08691。这是我本来打算做的事情，但后来将其编辑为红绿灯，但忘了更改其中的一些，尽管在我的实际代码中，t它们都使用相同的函数调用flag，并且它做的事情与我在开始时提到的一样抱歉，这非常有用，尽管我不知道为什么要对图像使用标记。另外，您能否向我解释一下JavaScript部分使用的是
，因为它只需要一个DOM元素，而不是4。至于Javascript-它只是迭代状态计数器。如果状态计数器已达到lightSeq数组（4）的长度，它会将其重置回0（因为没有light-4
）。然后它将div的class属性更改为'light-light-0'或任何数字，这将为它提供CSS中.light
的默认样式，并从添加的任何数字类中添加图像。抱歉，这非常有用，尽管我不确定为什么要为图像使用标记。您还可以向我解释一下吗JavaScript部分使用了
，因为它只需要一个DOM元素而不是4。就JavaScript而言，它只是迭代状态计数器。如果状态计数器达到lightSeq数组（4）的长度，它会将其重置回0（因为没有light-4）。然后它将div的class属性更改为'l'
.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];
}

$(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)
      }
    });
});