單擊按鈕后如何使用 jQuery 僅顯示一個 div

Question

我有兩個有display: none CSS 上沒有。 另外，我有一個按鈕的 jQuery 代碼，單擊該按鈕時，將顯示其中一個 div。 這取決於input type='radio'之一是否為:check 。 為此，我有八個輸入收音機，如果檢查了正確的收音機，它應該顯示#msgCmnhCer 消息。 否則，如果檢查了錯誤的輸入，它必須顯示 #msgCmnhErr 消息。

問題是：當我 select 輸入錯誤時，錯誤信息按預期出現。 但是，當我 select 輸入正確時，兩個 div 都會出現。

我試着用 jQuery 來做。 代碼如下

$("#exec").click(function(){

    // frenteF1 and andar5F1 are the IDs of the correct inputs. below is to show the correct message
    if(($('.frenteF1').is(':checked')) && ($('.andar5F1').is(':checked'))){
        $("#msgCmnhCer").css("display", "block");
        $('#msgCmnhCer').fadeOut(4500);
    }
    // error message
    else{
        $('#msgCmnhErr').css("display", "block");
        $('#msgCmnhErr').fadeOut(4500);

    }
});

這是消息的 HTML 代碼

                <div id="msgCmnhCer" class="msg-cmnh-certo">
                    <p>
                        You got it!
                    </p>
                </div>
                <div id="msgCmnhErr" class="msg-cmnh-errado">
                    <p>
                        Try again.
                    </p>
                </div>

以下是輸入按鈕代碼：

      <div class="qst1">
         <input type="radio" name="imagem" id="d1" class="input-fase1 direitaF1"/>
         <label for="d1" class="label-fase1 prgt-medieval">Right</label>
                                
         <input type="radio" name="imagem" id="d2" class="input-fase1 esquerdaF1"/>
         <label for="d2" class="label-fase1 prgt-medieval">Left</label>
                                
         <input type="radio" name="imagem" id="d3" class="input-fase1 frenteF1"/>
         <label for="d3" class="label-fase1 prgt-medieval">Ahead</label>
                                
         <input type="radio" name="imagem" id="d4" class="input-fase1 trasF1"/>
         <label for="d4" class="label-fase1 prgt-medieval">Behind</label>
      </div>
            
      <div class="qst1">
         <input type="radio" value="andar1" name="image" id="a1" class="input-fase1 andar2F1"/>
         <label for="a1" class="label-fase1 prgt-medieval">(2)</label>
                                
         <input type="radio" name="image" id="a2" class="input-fase1 andar3F2"/>
         <label for="a2" class="label-fase1 prgt-medieval"> (3)</label>
                                
         <input type="radio" name="image" id="a3" class="input-fase1 andar4F1"/>
         <label for="a3" class="label-fase1 prgt-medieval"> (4)</label>
                                
         <input type="radio" name="image" id="a4" class="input-fase1 andar5F1"/>
         <label for="a4" class="label-fase1 prgt-medieval"> (5)</label>
      </div>

如果檢查了正確的輸入，我怎樣才能只顯示正確的消息，而沒有錯誤消息？

Answer 1

if 條件的代碼不可能為假和真。 代碼不會在同一次傳遞中執行兩個代碼塊。 這里可能會發生兩件事之一：

(1) 在某處，$("#exec").click(...) 被多次觸發，不知何故，if 條件第一次為真，第二次為假。

（2）第一次點擊if條件為真，不等fadeout，if條件為假時再次快速點擊。

看來您實際上可能指的是復選框，而不是單選框。

https://jsfiddle.net/3v0bxqsw/

 <div id="msgCmnhCer" class="msg-cmnh">
   <p>
     You got it!
   </p>
 </div>
 <div id="msgCmnhErr" class="msg-cmnh">
   <p>
     Try again.
   </p>
 </div>
 
<input type="checkbox" class='andar5F1' id="male" name="gender" value="male" />
<label for="male">Male</label><br>
<input type="checkbox" id="female" class='frenteF1' name="gender" value="female" />
<label for="female">Female</label><br>
<input type="checkbox" id="other" name="gender" value="other" />
<label for="other">Other</label>
<button id="exec">
Click me
</button>

Answer 2

我假設這兩個單選按鈕是不同組的一部分，因此可以同時選擇兩者。 如果他們是同一問題/組的一部分，則條件將始終為假，因為在任何時間點只能選擇一次。

你沒有提供確切的 HTML 結構，所以我用一些虛擬 html 做了一個快速的 JSFiddle。 javascript 在示例中為我正常工作： https://jsfiddle.net/7m5L6yqo/13/

JS代碼：

$("#exec").click(function() {
      if ((($('.frenteF1').is(':checked')) && ($('.andar5F1').is(':checked')))) {
        $("#msgCmnhCer").css("display", "block");
        $('#msgCmnhCer').fadeOut(4500);
      }
      else {
        $('#msgCmnhErr').css("display", "block");
        $('#msgCmnhErr').fadeOut(4500);
      }
});