通过激活交通灯按钮手动切换灯答案

【问题标题】：Manually toggle lights by activating a Traffic-light button通过激活交通灯按钮手动切换灯
【发布时间】：2018-02-10 03:45:45
【问题描述】：

我可以请你帮忙处理这段代码吗？！如果激活了主按钮，则可以通过单独单击它们来手动切换颜色，如果按钮停用，则应关闭所有灯并且无法切换颜色。

目前的情况：通过激活按钮 - 仅切换黄灯。红色和绿色的光在点击时不会像黄光一样做出反应。为什么？？？

无法弄清楚如何实现它=卡住了。有什么帮助吗？

提前谢谢你！！！！

(function(){
    const rootElement = document.querySelector('.container__light');

    function TrafficLight() {

        function Light(color) {
            const lightBtnSwitch = rootElement.querySelector('.btn');
            const light = rootElement.querySelector(color);

            function lighterOn() {
                lightBtnSwitch.classList.add('active');

                function switchOn() {
                            if (!light.classList.contains('active')) {
                                light.classList.add('active');
                            } else {
                                light.classList.remove('active');
                            }
                }

                light.onclick = switchOn;
            }

            function lighterOff() {
                lightBtnSwitch.classList.remove('active');

                function switchOff() {
                    if (light.classList.contains('active')) {
                        light.classList.remove('active');
                    }
                }

                light.onclick = switchOff;
            }

            function triggerBtnSwitch() {
                if (lightBtnSwitch.classList.contains('active')) {
                    lighterOff();
                } else {
                    lighterOn();
                }
            }

            lightBtnSwitch.onclick = triggerBtnSwitch;
        }


        let lamp1 = new Light('.light-red');
        let lamp3 = new Light('.light-green');
        let lamp2 = new Light('.light-yellow');

    }

    let lighter = new TrafficLight();

})();

.position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
}
.active {
  opacity: 1!important;
}
* {
  box-sizing: border-box;
}
body {
  width: 100%;
  height: 100%;
  font-size: 16px;
  background-image: url("http://javascriptbook.com/code/c03/images/travelworthy-backdrop.jpg");
}
.wrapper {
  width: 100%;
  height: 100%;
}
.wrapper .container__light {
  width: 20%;
  height: 50%;
  border: 2px solid #000000;
  border-radius: 5px;
  background-color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: space-evenly;
      justify-content: space-evenly;
}
.wrapper .container__light .light {
  width: 50%;
  height: 50%;
  border-radius: 100%;
}
.wrapper .container__light .light-red {
  width: 50%;
  height: 50%;
  border: 1px solid darkred;
  border-radius: 100%;
  background-color: darkred;
  opacity: 0.3;
  cursor: pointer;
}
.wrapper .container__light .light-yellow {
  width: 50%;
  height: 50%;
  border: 1px solid darkgoldenrod;
  border-radius: 100%;
  background-color: darkgoldenrod;
  opacity: 0.3;
  cursor: pointer;
}
.wrapper .container__light .light-green {
  width: 50%;
  height: 50%;
  border: 1px solid darkgreen;
  border-radius: 100%;
  background-color: darkgreen;
  opacity: 0.3;
  cursor: pointer;
}
.wrapper .container__light .btn {
  margin: 1rem;
  padding: 15px 45px;
  margin-top: 1rem;
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  border: none;
}

<body>
    <div class="wrapper">
        <div class="container__light position-center">

            <div class="light light-red">

            </div>
            <div class="light light-yellow">

            </div>
            <div class="light light-green">

            </div>


            <button class="btn">On/Off</button>
        </div>

    </div>
</body>

【问题讨论】：

标签： javascript html css function

【解决方案1】：

将您的代码转换为 jquery。如您所见，这使它变得更容易和更短。

希望这会有所帮助。如果你有什么想法或者想要把它变成 js，我[很乐意去做。

使用 Javascript

//Boolean to know on/off state
var btn = false;
var button = document.getElementById('btn');
var lights = [].slice.call(document.getElementsByClassName('light'));

//Listener to on/off button
button.addEventListener('click', function() {
  if (btn) { //button goes from on to off 
    button.innerHTML = 'Off';
    btn = false;
    //turn all lights off
    lights.forEach(function(light) {
      light.classList.remove('active');
    })
  } else { //button goes from off to on
    button.innerHTML = 'On';
    btn = true;
  }
})

//Listener to lights
lights.forEach(function(light) {
  light.addEventListener('click', function() {
    if (btn) { //Validate on button
      this.classList.toggle('active');
    }
  })
})

.position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.active {
  opacity: 1!important;
}

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  font-size: 16px;
  background-image: url("http://javascriptbook.com/code/c03/images/travelworthy-backdrop.jpg");
}

.wrapper {
  width: 100%;
  height: 100%;
}

.wrapper .container__light {
  width: 20%;
  height: 50%;
  border: 2px solid #000000;
  border-radius: 5px;
  background-color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}

.wrapper .container__light .light {
  width: 50%;
  height: 50%;
  border-radius: 100%;
}

.wrapper .container__light .light-red {
  width: 50%;
  height: 50%;
  border: 1px solid darkred;
  border-radius: 100%;
  background-color: darkred;
  opacity: 0.3;
  cursor: pointer;
}

.wrapper .container__light .light-yellow {
  width: 50%;
  height: 50%;
  border: 1px solid darkgoldenrod;
  border-radius: 100%;
  background-color: darkgoldenrod;
  opacity: 0.3;
  cursor: pointer;
}

.wrapper .container__light .light-green {
  width: 50%;
  height: 50%;
  border: 1px solid darkgreen;
  border-radius: 100%;
  background-color: darkgreen;
  opacity: 0.3;
  cursor: pointer;
}

.wrapper .container__light .btn {
  margin: 1rem;
  padding: 15px 45px;
  margin-top: 1rem;
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="wrapper">
    <div class="container__light position-center">

      <div class="light light-red">

      </div>
      <div class="light light-yellow">

      </div>
      <div class="light light-green">

      </div>


      <button id="btn" class="btn">Off</button>
    </div>

  </div>
</body>

使用 Jquery

//Boolean to know on/off state
var btn = false;

//Listener to on/off button
$('.btn').click(function() {
  if (btn) { //button goes from on to off
    $(this).html('Off');
    btn = false;
    //turn all lights off
    $('.light').each(function() {
      $(this).removeClass('active');
    });
  } else { //button goes from off to on
    $(this).html('On');
    btn = true;
  }
})

//Listener to lights
$('.light').each(function() {
  $(this).click(function() {
    if (btn) { //Validate on button
      $(this).toggleClass('active');
    }
  })
})

.position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.active {
  opacity: 1!important;
}

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  font-size: 16px;
  background-image: url("http://javascriptbook.com/code/c03/images/travelworthy-backdrop.jpg");
}

.wrapper {
  width: 100%;
  height: 100%;
}

.wrapper .container__light {
  width: 20%;
  height: 50%;
  border: 2px solid #000000;
  border-radius: 5px;
  background-color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}

.wrapper .container__light .light {
  width: 50%;
  height: 50%;
  border-radius: 100%;
}

.wrapper .container__light .light-red {
  width: 50%;
  height: 50%;
  border: 1px solid darkred;
  border-radius: 100%;
  background-color: darkred;
  opacity: 0.3;
  cursor: pointer;
}

.wrapper .container__light .light-yellow {
  width: 50%;
  height: 50%;
  border: 1px solid darkgoldenrod;
  border-radius: 100%;
  background-color: darkgoldenrod;
  opacity: 0.3;
  cursor: pointer;
}

.wrapper .container__light .light-green {
  width: 50%;
  height: 50%;
  border: 1px solid darkgreen;
  border-radius: 100%;
  background-color: darkgreen;
  opacity: 0.3;
  cursor: pointer;
}

.wrapper .container__light .btn {
  margin: 1rem;
  padding: 15px 45px;
  margin-top: 1rem;
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="wrapper">
    <div class="container__light position-center">

      <div class="light light-red">

      </div>
      <div class="light light-yellow">

      </div>
      <div class="light light-green">

      </div>


      <button id="btn" class="btn">Off</button>
    </div>

  </div>
</body>

【讨论】：

拜托，我需要 JS。
@Oleksii 翻译成 jquery
你太棒了！非常感谢！