单击按钮后如何使用 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);
      }
});