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

时间：2018-02-09 19:19:23

标签： javascript html css function

我可以请你帮忙解决这个问题吗？！ 如果激活主按钮，能够通过单独单击手动切换颜色，如果按钮取消激活，则应关闭所有灯光并且无法切换颜色。

目前的情况： 通过激活按钮 - 仅切换黄灯。红光和绿光对点击为黄光没有反应。为什么???

无法弄清楚如何让它发生=卡住。有什么帮助？

提前谢谢!!!!

＆＃13;
＆＃13; 
------------------------------------  ARTIFACT UNDEPLOYMENT ----------------    --------------------------------
weblogic.Deployer invoked with options:  -debug -remote -verbose -noexit -    name webserviceR1 -targets Cluster_WXYZ -adminurl http://server:host -user     username -undeploy
java.lang.NoClassDefFoundError: weblogic/deploy/api/spi/DeploymentOptions
    at     weblogic.deploy.api.tools.deployer.Jsr88Operation.init(Jsr88Operation.java:70)
    at weblogic.deploy.api.tools.deployer.Operation.(Operation.java:52)
    at weblogic.deploy.api.tools.deployer.Operation.(Operation.java:47)
    at weblogic.deploy.api.tools.deployer.Operation.(Operation.java:42)
    at weblogic.deploy.api.tools.deployer.Jsr88Operation.    (Jsr88Operation.java:55)
    at weblogic.deploy.api.tools.deployer.UndeployOperation.    (UndeployOperation.java:15)
    at     weblogic.deploy.api.tools.deployer.Deployer.newOperation(Deployer.java:218)
    at weblogic.deploy.api.tools.deployer.Deployer.runBody(Deployer.java:86)
    at weblogic.utils.compiler.Tool.run(Tool.java:159)
    at weblogic.utils.compiler.Tool.run(Tool.java:116)
    at weblogic.Deployer.run(Deployer.java:74)
    at weblogic.Deployer.main(Deployer.java:55)
Caused by: java.lang.ClassNotFoundException:     weblogic.deploy.api.spi.DeploymentOptions
    at java.net.URLClassLoader.findClass(Unknown Source)
    at java.lang.ClassLoader.loadClass(Unknown Source)
    at sun.misc.Launcher$AppClassLoader.loadClass(Unknown Source)
    at java.lang.ClassLoader.loadClass(Unknown Source)
    ... 12 more
weblogic.deploy.api.tools.deployer.DeployerException:     weblogic/deploy/api/spi/DeploymentOptions
    at     weblogic.deploy.api.tools.deployer.Deployer.handleUnexpectedException(Deployer.j    ava:118)
    at weblogic.deploy.api.tools.deployer.Deployer.runBody(Deployer.java:95)
    at weblogic.utils.compiler.Tool.run(Tool.java:159)
    at weblogic.utils.compiler.Tool.run(Tool.java:116)
    at weblogic.Deployer.run(Deployer.java:74)
    at weblogic.Deployer.main(Deployer.java:55)
Unexpected Error Initializing Deployer: weblogic.Deployer$DeployerException:     weblogic.deploy.api.tools.deployer.DeployerException:     weblogic/deploy/api/spi/DeploymentOptions
------------------------------------  ARTIFACT DEPLOYMENT ------------------    ------------------------------
weblogic.Deployer invoked with options:  -debug -stage -remote -verbose -    upload -name webserviceR1 -source     C:\jenkins\jobs\webserviceR1\target\webserviceR1-0.0.1-SNAPSHOT.war -targets     Cluster_WXYZ -adminurl http://server:host -user username -deploy
java.lang.NoClassDefFoundError: weblogic/deploy/api/spi/DeploymentOptions
    at     weblogic.deploy.api.tools.deployer.Jsr88Operation.init(Jsr88Operation.java:70)
    at weblogic.deploy.api.tools.deployer.Operation.(Operation.java:52)
    at weblogic.deploy.api.tools.deployer.Operation.(Operation.java:47)
    at weblogic.deploy.api.tools.deployer.Operation.(Operation.java:42)
    at weblogic.deploy.api.tools.deployer.Jsr88Operation.    (Jsr88Operation.java:55)
    at weblogic.deploy.api.tools.deployer.DeployOperation.    (DeployOperation.java:18)
    at     weblogic.deploy.api.tools.deployer.Deployer.newOperation(Deployer.java:219)
    at weblogic.deploy.api.tools.deployer.Deployer.runBody(Deployer.java:86)
    at weblogic.utils.compiler.Tool.run(Tool.java:159)
    at weblogic.utils.compiler.Tool.run(Tool.java:116)
    at weblogic.Deployer.run(Deployer.java:74)
    at weblogic.Deployer.main(Deployer.java:55)
Caused by: java.lang.ClassNotFoundException:     weblogic.deploy.api.spi.DeploymentOptions
    at java.net.URLClassLoader.findClass(Unknown Source)
    at java.lang.ClassLoader.loadClass(Unknown Source)
    at sun.misc.Launcher$AppClassLoader.loadClass(Unknown Source)
    at java.lang.ClassLoader.loadClass(Unknown Source)
    ... 12 more
weblogic/deploy/api/spi/DeploymentOptions
＆＃13; 
(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();

})();
＆＃13; 
.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;
}
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

将您的代码转换为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>

相关问题
最新问题