如何检查悬停功能中的两个条件
how to check for 2 conditions within a hover function
我有一个提问页面,用户要选中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();
});
相关文章:
- 基于两个条件退出While循环
- 如何使用jQuery绕过具有指定类和两个条件的元素的函数
- 在if语句中检查这两个条件,即使第一个条件为false
- 执行Jquery函数()的两个条件
- 获取具有两个条件的所有文本框值
- if 语句 (jQuery) 中的两个条件
- 满足两个条件时的 jQuery 执行函数
- 两个条件 - 这将是第一个
- 具有两个条件的 while 循环仅检查一个
- 虽然循环多个条件不会同时检查这两个条件
- 如何检查悬停功能中的两个条件
- jQuery在click事件上执行这两个条件
- 如果满足两个条件,则获得加分
- 在do while语句中有两个条件
- 基于两个条件进行筛选
- angularJS过滤两个条件
- 如何启用/禁用提交按钮,仅当提供两个条件时:检查输入单选和填充输入文本
- jQuery Selectors删除满足两个条件的表行
- 两个条件合为一
- javascript中的两个条件