Question

我有一个测验页面询问问题，用户要检查3个合适的复选框作为他或她的答案（在6个复选框的列表中）。然后用户通过将鼠标悬停在答案按钮上来检查他/她的答案（＆＃39;＃check-answer-btn＆＃39;）

如果用户将$('#check-answer-btn')悬停在选中少于3个复选框的$('.alert-box2')上，我希望某个提醒$('#check-answer-btn').hover(function(e){ var checkboxes = $('.chbx-25b input[type="checkbox"]:checked').length; if (checkboxes < 3) { $('.alert-box2').fadeIn(200); }, $('.alert-box2').stop().fadeOut(200); else if (checkboxes >= 3) { $('#checkbox-fadebox').fadeIn(200); }, $('#checkbox-fadebox').stop().fadeOut(200); );为淡入。

所以我的问题是，我可以在一个悬停功能中有两个条件吗？我发布了我试过的代码无济于事。有人可以帮我找到解决方案吗？感谢。

<p style="width:675px; margin:15px 0 20px 0;">Please choose the best answer for each of the following questions. <br>After you've selected your answer, roll over the <span class="bold">Check Answer</span> button.</p>

        <div class="quiz-25a question1 inline vertical" style="margin:15px 0 0 0;">

            <p class="bold float-left">1.</p><span class="bold float-left" style=" width:640px; margin:0 0 10px 10px;">Indicators are why the claim rep referred this questionable claim to you as an investigator.</span>
            <div class="clear"></div>

            <input id="quiz-25a-1a" type="radio" name="quiz-25a-1a" value="a"><p class="float-left" style="margin:0 12px;">a.</p><span>True</span>
            <div class="clear"></div>

            <input id="quiz-25a-1b" type="radio" name="quiz-25a-1b" value="b"><p class="float-left" style="margin:0 12px;">b.</p><span>False</span>

            <div class="clear"></div>

            <button id="answer-btn1" class="answer-btn"></button>

        </div><!-- end quiz-25a question1 inline vertical -->





        <form class="chbx-25a inline vertical" style="margin:15px 0 0 0;">

        <p class="bold float-left">2.</p><span class="bold float-left" style=" width:640px; margin:0 0 10px 10px;">Identify 3 reasons included in the following list that are reasons for creating a vehicle theft insurance fraud scheme.</span>
            <div class="clear"></div>

            <label for="chbx-25a-2-1"><input id="chbx-25a-2-1" type="checkbox"><span class="bold float-left">A.</span><span>There is no work number for either Bob or Jane Field’s in the claim file.</span></label>
            <label for="chbx-25a-2-2"><input id="chbx-25a-2-2" type="checkbox"><span class="bold float-left">B.</span><span>The vehicle had 8400 miles on it at the time of the theft.</span></label>
            <label for="chbx-25a-2-3"><input id="chbx-25a-2-3" type="checkbox"><span class="bold float-left">C.</span><span>The theft happened in the middle of the day, downtown with no witnesses.</span></label>
            <label for="chbx-25a-2-4"><input id="chbx-25a-2-4" type="checkbox"><span class="bold float-left">D.</span><span>Mrs. Fields parked the car one door down from Betty’s.</span></label>
            <label for="chbx-25a-2-5"><input id="chbx-25a-2-5" type="checkbox"><span class="bold float-left">E.</span><span>The vehicle had a premium sound system.</span></label>
            <label for="chbx-25a-2-6"><input id="chbx-25a-2-6" type="checkbox"><span class="bold float-left">F.</span><span>The vehicle had an anti-theft alarm that no one heard.</span></label>

        </form><!-- end chbx-25a inline vertical -->

        <button id="check-answer-btn" class="check-answers-btn"></button>

        <p style="margin-top:15px;">Click NEXT to continue.</p>

        <div id="answer1" class="fade-box absolute" style="width:340px; height:105px; top:150px; left:270px;">
            <p class="answer-title bold">The correct answer is a, true.</p>
            <p class="font-size14">Indicators of a questionable claim are inconsistencies in a claimant’s story, they don’t make sense in the over-all big picture.  As these indicators mount up, it becomes more important to investigate the claim.</p>
        </div><!-- end answer1 -->


        <div id="checkbox-fadebox" class="fade-box absolute" style="text-align:center; width:410px; height:470px; top:65px; left:235px;">

            <p class="bold italic" style="font-size:16rpx; margin-top:5px;">The following indicators of vehicle theft insurance fraud apply to this case.</p>

            <img src="img/25b-chbx-ans.gif" alt="" style="margin:12px 0 0 0;"/>

        </div><!-- end checkbox-fadebox -->

        <div class="alert-box absolute">

            <p>Please select the best answer(s)<br> for <span style="text-decoration:underline;">each</span> of the following questions.</p>

            <img class="OK-btn absolute pointer" style="display:block; bottom:6px; right:6px;" src="img/OK-btn.gif" />

        </div>

        <div class="alert-box2 absolute">

            <p>Please identify 3 reasons for creating a vehicle theft insurance fraud scheme.</p>

        </div>

我认为HTML可能太多但是在这里：

{{1}}

Answer 1

我通过发现自己语法中的错误并将条件分解为两个独立的语句来找到答案。我意识到我分配给我的变量“复选框”的值与我在HTML（.chbx-25b和.chbx-25a中找到的值不同。此外，在每个“ifs”之后使用的第一个花括号是不正确的。我在下面发布了成功的代码块。感谢所有试图帮助的人！

       $('#check-answer-btn').hover(function(){
            var checkboxes = $('.chbx-25b input[type="checkbox"]:checked').length;

            if(checkboxes === 3)
                $('#checkbox-fadebox').fadeIn();
            }, function(){
                $('#checkbox-fadebox').stop().fadeOut();
        });

        $('#check-answer-btn').hover(function(){
            var checkboxes = $('.chbx-25b input[type="checkbox"]:checked').length;

            if(checkboxes!== 3)
                $('.alert-box25b').fadeIn();
            }, function(){
                $('.alert-box25b').stop().fadeOut();
        });

如何检查悬停功能中的2个条件

1 个答案: