Javascript 如何检查悬停函数中的2个条件

我有一个提问页面，用户需要勾选3个适当的复选框作为答案（从6个复选框列表中）。然后用户将鼠标悬停在回答按钮上检查其答案（“#检查答案btn”）

如果用户将鼠标悬停在

$（'#check answer btn'）

上，并且选中的复选框少于3个，则我希望fadeIn显示某个警报

$（'.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);
        );

$（'#检查答案btn'）。悬停（函数（e）{
var复选框=$（'.chbx-25b输入[type=“checkbox”]：选中]）。长度；
如果（复选框<3）{
$（'.alert-box2'）.fadeIn（200）；
}，$（'.alert-box2'）.stop（）.fadeOut（200）；
否则如果（复选框>=3）{
$（“#复选框fadebox”）.fadeIn（200）；
}，$（'#复选框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="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>

请为以下每个问题选择最佳答案。
选择答案后，滚动“检查答案”按钮

1.

指标是索赔代表将此可疑索赔提交给您作为调查员的原因。

a.

True b.

False

2.

确定以下列表中包括的3个原因，它们是创建车辆盗窃保险欺诈计划的原因。 A.索赔文件中没有Bob或Jane Field的工作编号。 B.被盗时，车辆行驶了8400英里。 盗窃发生在当天中午，市中心没有目击者。 菲尔兹太太把车停在贝蒂家楼下一个门的地方。 E.车辆具有高级音响系统。 F.车辆上有一个无人听到的防盗警报。 单击下一步继续

正确答案为a，正确

可疑索赔的指标在索赔人的故事中是不一致的，它们在总体上没有意义。随着这些指标的增加，调查索赔变得更加重要

以下车辆盗窃保险欺诈指标适用于本案

请为以下每个问题选择最佳答案

请确定创建车辆盗窃保险欺诈计划的3个原因

---

我通过发现自己语法中的错误并将条件句分成两个独立的条件句找到了答案。我意识到分配给变量“checkbox”的值与在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();
        });

---

您正在使用

hover

in/out处理程序，这真的是您所期望的吗？可能您将其与

mouseover

HTML混淆了，这将非常有用。