Question

我正在尝试使用HTML，CSS和Javascript构建一个简单的交通灯。点击灯光应改变灯光的颜色（如果我点击它是绿色，它会变为黄色，依此类推）。 HTML：

<div id="outer_box" onclick = "change()">
    <div id ="red"></div>
    <div id ="yellow"></div>
    <div id ="green"></div>
</div>

CSS：

#outer_box{
  width: 70px;
  height:150px;
  background:black;
}

#red{
  width: 50px;
  height:50px;
  margin: auto;
  border-radius: 50%;
  background: red;
}

#yellow{
  width: 50px;
  height:50px;
  margin: auto;
  border-radius: 50%;
  background: yellow;
}

JavaScript的：

var state;
state = "green"

function change(){
  if (state=="green"){
    state = "yellow"; 
  }
  else if (state== "yellow"){
    state = "red";
    //state_def();
  }
  else{
    state = "green";
    //state_def();
  }
  console.log(state);
  state_def();
}

function state_def(){
  console.log("inside state def")
  console.log(state);
  if (state == "green"){
    document.getElementById("yellow").disabled = true;
    //$("#yellow").prop('disabled',true);
    //$("#red").prop('disabled',true);
  }
  else if (state == "yellow"){
    $("#green").prop('disabled',true);
    $("#red").prop('disabled',true);
  }
  else{
    $("#yellow").prop('disabled',true);
    $("#green").prop('disabled',true);
  }
}

以下是jsFiddle链接：https://jsfiddle.net/taniachanda86/mx7r0hrL/

请帮助我理解我做错了什么？

Answer 1

以下方法可以使用JQuery。添加和删除活动类。

首先显示一盏灯。点击它会改变。

＆＃13;

var items = $('div.light');
var currentItem = items.filter('.active');
$('#outer_box').on('click', function() {
    var nextItem = currentItem.next();
    currentItem.removeClass('active');
    if ( nextItem.length ) {
        currentItem = nextItem.addClass('active');
    } else {
        currentItem = items.first().addClass('active');
    }
});

＆＃13;

#outer_box{
  width: 70px;
  height:150px;
  background:black;
}

#red{
  width: 50px;
  height:50px;
  margin: auto;
  border-radius: 50%;
  background: red;
  display:none;
}

#yellow{
  width: 50px;
  height:50px;
  margin: auto;
  border-radius: 50%;
  background: yellow;
  display:none;
}

#green{
  width: 50px;
  height:50px;
  margin: auto;
  border-radius: 50%;
  background: green;
  display:none;
}

.active{
  display:block !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer_box">
  <div id ="red" class="light active"></div>
  <div id ="yellow" class="light"></div>
  <div id ="green" class="light"></div>
</div>

＆＃13;

Answer 2

var colors = ["red", "yellow", "green"];
var state = 1;//because red already visible
//addEventListener method to add onclick handler
document.getElementById('outer_box').addEventListener('click', function(){
   if (state==3){//if state reaches to 3, reset to 0
      state = 0;
   }
   var allLights = document.querySelectorAll('.light');
   for(var i = 0; i < allLights.length; i++) {//remove active class from all light
     allLights[i].className = "light";
   }
   document.getElementById(colors[state]).className = "light active"; //add active class on the next light;
   state++;//increment state
 }, false);

我已经更新了你的小提琴。 check here

Answer 3

解决方案非常简单。

$("#green").attr('disabled', true);

将显示在检查元素时实际上正在禁用div。但是，它不会让你明白css颜色受其影响。
而是定义不透明度属性将帮助您实现您的需求以下是plunker：https://plnkr.co/edit/mdlAS68gpFBm64jfiCCu?p=preview。我希望这就是你要求的。

Answer 4

打开你的javascript控制台，看看失败：

Uncaught ReferenceError: change is not defined

change不在<div>的onclick范围内。

这是因为jsfiddle的Javascript部分在onload函数中执行。见https://stackoverflow.com/a/5468370/189058

Answer 5

我想你想要一个点击的红绿灯会点亮所点击的灯光。如果是这样，可以通过以下代码来实现。

＆＃13;

$( document ).ready(function() {
  $('#red').css("background-color", "red");
  $('#yellow').css("background-color", "white");
  $('#green').css("background-color", "white");

  $('.trafficlight').click(function(){
    var selected_id=$(this).attr("id"); 
    if(selected_id=='green')
    {
        $('#green').css("background-color", "green");
        $('#red').css("background-color", "white");
        $('#yellow').css("background-color", "white");
    }

    else if(selected_id=='yellow')
    {
        $('#yellow').css("background-color", "yellow");
        $('#red').css("background-color", "white");
        $('#green').css("background-color", "white");
    }

    else
    {
        $('#red').css("background-color", "red");
        $('#yellow').css("background-color", "white");
        $('#green').css("background-color", "white");
    }
});

});

＆＃13;

#outer_box{
width: 70px;
height:150px;
background:black;
}

#red{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background:red;
}

#yellow{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: yellow;
}

#green{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outer_box" >
<div id ="red" class="trafficlight"></div>
<div id ="yellow" class="trafficlight"></div>
<div id ="green" class="trafficlight"></div>
</div>

＆＃13;

如何禁用<div>

5 个答案: