如果语句没有在第三个按钮上注册，点击

如何解决如果语句没有在第三个按钮上注册，点击

在下面的代码片段中，当第一次单击按钮时，我希望所有的 div 都淡出，除了它们后面的红色。在每次后续点击时，我想将不透明度设置为具有更高堆栈顺序的下一个 div 的 1。

在第三次点击之前这一切正常 - 此时什么也没有发生：

document.querySelector( 'button' ).addEventListener( 'click',button );

let black = document.querySelector( '.black' ),blue = document.querySelector( '.blue' ),green = document.querySelector( '.green' ),red = document.querySelector( '.red' );
    
black.style.opacity = 1; blue.style.opacity = 1;
green.style.opacity = 1; red.style.opacity = 1;

function button() {
  let blackStyle = black.style,blueStyle = blue.style,greenStyle = green.style,redStyle = red.style;  
  
  if( blackStyle.opacity == 1 ) {
    blackStyle.opacity = 0;
    blueStyle.opacity = 0;
    greenStyle.opacity = 0;
    redStyle.opacity = 1;
    document.querySelector( 'button' ).innerHTML = 'click 1 registered ( again )';
  }
  else if ( redStyle.opacity == 1 ) {
    greenStyle.opacity = 1;
    document.querySelector( 'button' ).innerHTML = 'click 2 registered ( again )';
  }  
  else if ( greenStyle.opacity == 1 ) {
    //This doesn't work
    blueStyle.opacity = 1;
    document.querySelector( 'button' ).innerHTML = 'click 3 registered ( again )';
  }    
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
div,button {
  position: absolute;
  border-radius: 10rem;
  width: 10rem;
  height: 10rem;
  background-color: #e23;
  transition-property: opacity;
  transition-duration: 0.25s;
}
.green { transform: scale( 0.8 ); background-color: #3e5; }
.blue { transform: scale( 0.5 ); background-color: #2af; }
.black { transform: scale( 0.1 ); background-color: #222; }
button {
  transform: translateX( -25% );
  left: 12.5%;
  border-style: none;
  border-radius: 1rem;
  width: auto;
  height: auto;
  padding: 0.75rem;
  background-color: #000;
  color: #fff;
  cursor: pointer;
}
button:hover { background-color: #444; }

<div class='red'></div>
<div class='green'></div>
<div class='blue'></div>
<div class='black'></div>

<button>click here ( again )</button>

单击 3 从不注册。 它的 if 语句检查是否 greenStyle.opacity == 1。这应该是因为 greenStyles 的不透明度被上一次点击设置为 1。

如何更改代码以注册第三次点击？

解决方法

您的问题是第二个 else if 永远不会到达，因为 redStyle.opacity 停留在 1 并且只有在其他 if 为假时才会检查第三个检查。如果在 greenStyle.opacity 之前添加 redStyle.opacity 的 if，它会起作用。

document.querySelector( 'button' ).addEventListener( 'click',button );

let black = document.querySelector( '.black' ),blue = document.querySelector( '.blue' ),green = document.querySelector( '.green' ),red = document.querySelector( '.red' );
    
black.style.opacity = 1; blue.style.opacity = 1;
green.style.opacity = 1; red.style.opacity = 1;

function button() {
  let blackStyle = black.style,blueStyle = blue.style,greenStyle = green.style,redStyle = red.style;  
  
  if( blackStyle.opacity == 1 ) {
    blackStyle.opacity = 0;
    blueStyle.opacity = 0;
    greenStyle.opacity = 0;
    redStyle.opacity = 1;
    document.querySelector( 'button' ).innerHTML = 'click 1 ( again )';
  }
  else if ( greenStyle.opacity == 1 ) {
    //This doesn't work
    blueStyle.opacity = 1;
    document.querySelector( 'button' ).innerHTML = 'click 3 ( again )';
  }    
  else if ( redStyle.opacity == 1 ) {
    greenStyle.opacity = 1;
    document.querySelector( 'button' ).innerHTML = 'click 2 ( again )';
  }  
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
div,button {
  position: absolute;
  border-radius: 10rem;
  width: 10rem;
  height: 10rem;
  background-color: #e23;
  transition-property: opacity;
  transition-duration: 0.25s;
}
.green { transform: scale( 0.8 ); background-color: #3e5; }
.blue { transform: scale( 0.5 ); background-color: #2af; }
.black { transform: scale( 0.1 ); background-color: #222; }
button {
  transform: translateX( 0% );
  left: 12.5%;
  border-style: none;
  border-radius: 1rem;
  width: auto;
  height: auto;
  padding: 0.75rem;
  background-color: #000;
  color: #fff;
  cursor: pointer;
}
button:hover { background-color: #444; }

<div class='red'></div>
<div class='green'></div>
<div class='blue'></div>
<div class='black'></div>

<button>click here ( again )</button>