我有一个资格表，用户必须回答七个问题才能进入下一个级别。提交答案时，我提供了“是与否”按钮。单击“是”按钮时，我必须将其隐藏div并显示一条错误消息。但是，当单击第一个问题的“是”按钮时，我只需要显示错误消息。如果单击“否”按钮，则会显示下一个问题。每当单击“是”按钮时，我都会显示错误消息。认为在单击“否”按钮并显示下一个问题后，我单击“是”按钮。在这种情况下，我需要隐藏显示的问题并显示错误消息。因为代码很大，所以我将js fiddle。请我解决此问题，因为我是jquery新手。
please have a look at https://jsfiddle.net/apv183t5/
我的代码：
$(function(){
$(".yesBtn").click(function(){
$(this).addClass("dangerBtn");
$('.noBtn').removeClass("successBtn");
/*$("#quesTwo").hide();*/
$(this).closest('div>.divHide').hide();
$(".errMsgDiv").show(500,function(){
$(".yesBtn").addClass("yesBtn");
$(".quesSec").css({"margin-bottom":"5px"});
});
});
$("#first_no").click(function(){
$(this).addClass("successBtn");
$('.yesBtn').removeClass("dangerBtn");
$("#quesTwo").show(500);
$(".errMsgDiv").hide(500,function(){
$(".quesSec").css({"margin-bottom":"30px"});
});
});
$("#sec_no").click(function(){
$(this).addClass("successBtn");
$('.yesBtn').removeClass("dangerBtn"); ;
$("#quesThree").show(500);
$(".errMsgDiv").hide(500,function(){
$(".quesSec").css({"margin-bottom":"30px"});
});
});
$("#third_no").click(function(){
$(this).addClass("successBtn");
$('.yesBtn').removeClass("dangerBtn");
$("#quesFour").show(500);
$(".errMsgDiv").hide(500,function(){
$(".quesSec").css({"margin-bottom":"30px"});
});
});
$("#fourth_no").click(function(){
$(this).addClass("successBtn");
$('.yesBtn').removeClass("dangerBtn");
$("#quesFive").show(500);
$(".errMsgDiv").hide(500,function(){
$(".quesSec").css({"margin-bottom":"30px"});
});
});
$("#fifth_no").click(function(){
$(this).addClass("successBtn");
$('.yesBtn').removeClass("dangerBtn");
$("#quesSix").show(500);
$(".errMsgDiv").hide(500,function(){
$(".quesSec").css({"margin-bottom":"30px"});
});
});
$("#sixth_no").click(function(){
$(this).addClass("successBtn");
$('.yesBtn').removeClass("dangerBtn");
$("#quesSeven").show(500);
$(".errMsgDiv").hide(500,function(){
$(".quesSec").css({"margin-bottom":"30px"});
});
});
$("#seventh_no").click(function(){
$(this).addClass("successBtn");
$('.yesBtn').removeClass("dangerBtn");
$(".successMsgDiv").show(500,function(){
$(".quesSec").css({"margin-bottom":"30px"});
$(".errMsgDiv").hide(500);
});
});
});
<div class="col-sm-push-2 col-sm-8 quesSec">
<div class="shipping-info questionDiv">
<!-- Question 1 -->
<div class="col-xs-12" id="quesOne">
<h5>QUESTION <span class="quesNum">1 of 7</span></h5>
<ul class="star">
<li>
Is the Applicant or any Proposed Covered Person eligible for Medicaid or Medicare?
</li>
</ul>
<div class="col-md-3">
<button type="button" class="btn btn-success yesBtn">YES</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-danger noBtn" id="first_no">NO</button>
</div>
</div>
<!-- Question 1 Ends-->
<!-- Question 2 -->
<div class="col-xs-12 divHide" id="quesTwo">
<h5>QUESTION <span class="quesNum">2 of 7</span></h5>
<ul class="star">
<li>
Will any applicant have other health insurance in force on the policy effective date or be eligible for Medicaid?
</li>
</ul>
<div class="col-md-3">
<button type="button" class="btn btn-success yesBtn">YES</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-danger noBtn" id="sec_no">NO</button>
</div>
</div>
<!-- Question 2 Ends-->
<!-- Question 3 -->
<div class="col-xs-12 divHide" id="quesThree">
<h5>QUESTION <span class="quesNum">3 of 7</span></h5>
<ul class="star">
<li>
Have/Are you, or any applicant:
<ul>
<li>Now pregnant, in process of adoption or undergoing infertility treatment?</li>
<li>Over 300 pounds if male or over 250 pounds if female?</li>
<li>Been advised by a medical professional to have diagnostic testing, treatment, surgery that has not yet been completed?</li>
</ul>
</li>
</ul>
<div class="col-md-3">
<button type="button" class="btn btn-success yesBtn">YES</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-danger noBtn" id="third_no">NO</button>
</div>
</div>
<!-- Question 3 Ends-->
<!-- Question 4 -->
<div class="col-xs-12 divHide" id="quesFour">
<h5>QUESTION <span class="quesNum">4 of 7</span></h5>
<ul class="star">
<li>
Within the last 5 years has any applicant had a diagnosis, symptoms, an abnormal test result or received treatment, medication or consultation for:
<ul>
<li>cancer or malignant melanoma</li>
<li>atrial fibrillation or abnormal heart rhythm, heart disorders, angina, heart attack or heart failure</li>
<li>stroke</li>
<li>uncontrolled hypertension</li>
<li>diabetes except gestational</li>
<li>hepatitis C or liver or kidney disorders</li>
</ul>
</li>
</ul>
<div class="col-md-3">
<button type="button" class="btn btn-success yesBtn" >YES</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-danger noBtn" id="fourth_no">NO</button>
</div>
</div>
<!-- Question 4 Ends-->
<!-- Question 5 -->
<div class="col-xs-12 divHide" id="quesFive">
<h5>QUESTION <span class="quesNum">5 of 7</span></h5>
<ul class="star">
<li>
Within the last 5 years has any applicant been diagnosed or treated by a physician or medical practitioner for Acquired Immune Deficiency Syndrome (AIDS) or tested positive for Human Immunodeficiency Virus (HIV)?
</li>
</ul>
<div class="col-md-3">
<button type="button" class="btn btn-success yesBtn">YES</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-danger noBtn" id="fifth_no">NO</button>
</div>
</div>
<!-- Question 5 Ends-->
<!-- Question 6 -->
<div class="col-xs-12 divHide" id="quesSix">
<h5>QUESTION <span class="quesNum">6 of 7</span></h5>
<ul class="star">
<li>
Is the Applicant or any Proposed Covered Person eligible for Medicaid or Medicare?
</li>
</ul>
<div class="col-md-3">
<button type="button" class="btn btn-success yesBtn">YES</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-danger noBtn" id="sixth_no">NO</button>
</div>
</div>
<!-- Question 6 Ends-->
<!-- Question 7 -->
<div class="col-xs-12 divHide" id="quesSeven">
<h5>QUESTION <span class="quesNum">7 of 7</span></h5>
<ul class="star">
<li>
If all persons to be insured are United States citizens, please answer “No” to this question. If any person to be insured is not a United States citizen, has that person resided outside the United States at any time during the prior 12 months?
</li>
</ul>
<div class="col-md-3">
<button type="button" class="btn btn-success yesBtn" id="Yesbtn">YES</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-danger noBtn" id="seventh_no">NO</button>
</div>
</div>
<!-- Question 7 Ends-->
</div>
</div>
答案 0 :(得分：0)
达到要求的结果
下面是修改后的代码
HTML
<div class="col-md-3">
<button type="button" class="btn btn-success yesBtn">YES</button>
<div class="col-md-3"></div>
<button type="button" class="btn btn-danger noBtn" id="sec_no">NO</button>
</div>
JQuery
$(".yesBtn").click(function(event){
$(this).addClass("dangerBtn");
$('.noBtn').removeClass("successBtn");
$(this).closest('div>.divHide').find('ul').hide();
$(this).closest('div').hide();
$(".errMsgDiv").show(500,function(){
$(".yesBtn").addClass("yesBtn");
$(".quesSec").css({"margin-bottom":"5px"});
});
});