Question

我有一个问题，我无法关闭弹出窗口，因为否则如果调用函数popup（）时语句未执行，则else始终执行id =“ modal1”，因为它始终为true。我不知道if语句将如何为假，因此else if语句将被执行。

 <td onclick="popup()"><i class="fa fa-hand-o-right"></i></td>
 <div id="modal1" class="modal">
                    <div class="modal-wrapper">
                        <div class="content">
                            <div id="popOff1" class="popOff" onclick="popup()">
                                <i class="fa fa-window-close"></i>
                            </div>
                            <video width="550" height="340" controls>
                                <source src="mov_bbb.mp4" type="video/mp4">
                                Your browser does not support HTML video.
                            </video>
                        </div>

js

function popup(){
    
    if(document.getElementById("modal1").className === "modal"){
        document.getElementById("modal1").style.display = "flex";
        console.log("work");
    }
    // the else if statement doesn't execute!!
    else if(document.getElementById("popOff1").className === "popOff") {
        document.getElementById("modal1").style.display = "none";
        console.log("work2");
    }           
}

Answer 1

不要使用else if，而要使用另一个if块

Answer 2

您应该使用if(condition){instructions}，if(cond.){instr.} else{instr.}或if(cond.){instr.} else if(cond.){instr.} else{instr.}，但不能使用if(cond.){instr.} else if(cond.){instr.}。

最佳做法是进行编码，就好像您在推理中可能犯了错误...发生一样；）这意味着：我们可能认为只有两个条件是我们代码的可能结果，但还有更多条件。因此，我建议使用这种方法：

function popup() {
  if (document.getElementById("modal1").className === "modal") {
    document.getElementById("modal1").style.display = "flex";
    console.log("work");
  } else if (document.getElementById("popOff1").className === "popOff") {
    document.getElementById("modal1").style.display = "none";
    console.log("work2");
  } else {
    console.log("an unforeseen scenario");
  }
}

或

function popup() {
  if (document.getElementById("modal1").className === "modal") {
    document.getElementById("modal1").style.display = "flex";
    console.log("work");
  } else {
    if (document.getElementById("popOff1").className === "popOff") {
      document.getElementById("modal1").style.display = "none";
      console.log("work2");
    }
  }
}

选中https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else

popup（）函数始终执行第一个if语句

2 个答案: