javascript - 如何禁用

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。添加和删​​除事件类。

首先显示一盏灯。单击它会发生变化。

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

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

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