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

how to check for 2 conditions within a hover function

本文关键字:两个 条件 悬停 何检查 检查 功能      更新时间:2023-09-26

我有一个提问页面,用户要选中3个适当的复选框作为他或她的答案(从6个复选框列表中选择)。然后用户将鼠标悬停在回答按钮("#check answer btn")上检查他/她的答案

如果用户将鼠标悬停在$('#check-answer-btn')上,并且选中的复选框少于3个,则我希望某个提醒$('.alert-box2')变淡In。

所以我的问题是,在一个悬停函数中可以有两个条件句吗?我正在发布我尝试过但没有成功的代码。有人能帮我找到解决方案吗?谢谢

       $('#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);
        );

我认为HTML可能太多了,但现在是:

<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="answerswer-btn1" class="answerswer-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="answerswer1" class="fade-box absolute" style="width:340px; height:105px; top:150px; left:270px;">
            <p class="answerswer-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>

我发现了自己语法中的错误,并将条件句分解为两个单独的条件句,从而找到了答案。我意识到我分配给变量"checkbox"的值与HTML中的值(.chbx-25b.chbx-25a)不同。此外,每个"if"后面使用的第一个大括号是不正确的。我已经在下面发布了成功的代码块。感谢所有试图提供帮助的人!

       $('#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();
        });