javascript - 如果语句未在第三个按钮单击时注册

Question

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

这工作正常，直到第三次点击 - 此时没有任何反应：

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 语句检查 if greenStyle.opacity == 1。应该是因为 greenStyles 的不透明度刚刚被上一次点击设置为 1。

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

标签： javascripthtmlcssif-statementopacity

Answer 1

您的问题是else if永远不会达到第二个，因为只有在其他s 为 falseredStyle.opacity时1才会检查第三个检查。if如果你添加 if for greenStyle.opacitybefore redStyle.opacity，它的工作原理。

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>