因此，我一直在尝试为我的网站项目创建成本估算表。整个想法是，我将准备大约10个问题，并且网站只会在客户回答了第一个问题后才显示下一个问题。
在select而不是radio中提供选项之前，它可以正常工作。即使客户回答了先前的问题，也不会显示下一个问题。
我不太确定自己做错了什么，希望这里的偷窥可以给我一个方向。
$(document).ready(function() {
$("#problem").hide();
$("#brand").hide();
$("#ipmodel").hide();
$("#stype").hide();
$("#sgsmodel").hide();
$("#sgnmodel").hide();
$("#nmodel").hide();
$("#smodel").hide();
$("#turnon").hide();
$("#liquiddamage").hide();
$("#result").hide();
var input = document.getElementById('phone');
document.getElementById('phone_no').addEventListener('click', function() {
showBrand();
hideProblem();
hideIpmodel();
hideStype();
hideSgsmodel();
hideSgnmodel();
hideNmodel();
hideSmodel();
hideTurnon();
hideLiquiddamage();
});
document.getElementById('phone_yes').addEventListener('click', function() {
showBrand();
hideProblem();
hideIpmodel();
hideStype();
hideSgsmodel();
hideSgnmodel();
hideNmodel();
hideSmodel();
hideTurnon();
hideLiquiddamage();
});
document.getElementById('applephone').addEventListener('click', function() {
showBrand();
hideProblem();
showIpmodel();
hideStype();
hideSgsmodel();
hideSgnmodel();
hideNmodel();
hideSmodel();
hideTurnon();
hideLiquiddamage();
});
document.getElementById('gss').addEventListener('click', function() {
showBrand();
hideProblem();
hideIpmodel();
showStype();
showSgsmodel();
hideSgnmodel();
hideNmodel();
hideSmodel();
hideTurnon();
hideLiquiddamage();
});
document.getElementById('samsungphone').addEventListener('click', function() {
showBrand();
hideProblem();
hideIpmodel();
showStype();
hideSgsmodel();
hideSgnmodel();
hideNmodel();
hideSmodel();
hideTurnon();
hideLiquiddamage();
});
document.getElementById('gns').addEventListener('click', function() {
showBrand();
hideProblem();
hideIpmodel();
showStype();
hideSgsmodel();
showSgnmodel();
hideNmodel();
hideSmodel();
hideTurnon();
hideLiquiddamage();
});
document.getElementById('nokiaphone').addEventListener('click', function() {
showBrand();
hideProblem();
hideIpmodel();
hideStype();
hideSgsmodel();
hideSgnmodel();
showNmodel();
hideSmodel();
hideTurnon();
hideLiquiddamage();
});
document.getElementById('sonyphone').addEventListener('click', function() {
showBrand();
hideProblem();
hideIpmodel();
hideStype();
hideSgsmodel();
hideSgnmodel();
hideNmodel();
showSmodel();
hideTurnon();
hideLiquiddamage();
});
document.getElementById('otherphone').addEventListener('click', function() {
showBrand();
hideProblem();
hideIpmodel();
hideStype();
hideSgsmodel();
hideSgnmodel();
hideNmodel();
hideSmodel();
hideTurnon();
hideLiquiddamage();
});
function showProblem() {
$("#problem").show();
}
function hideProblem() {
$("#problem").hide();
}
function showBrand() {
$("#brand").show();
}
function hideBrand() {
$("#brand").hide();
}
function showIpmodel() {
$("#ipmodel").show();
}
function hideIpmodel() {
$("#ipmodel").hide();
}
function showStype() {
$("#stype").show();
}
function hideStype() {
$("#stype").hide();
}
function showSgsmodel() {
$("#sgsmodel").show();
}
function hideSgsmodel() {
$("#sgsmodel").hide();
}
function showSgnmodel() {
$("#sgnmodel").show();
}
function hideSgnmodel() {
$("#sgnmodel").hide();
}
function showNmodel() {
$("#nmodel").show();
}
function hideNmodel() {
$("#nmodel").hide();
}
function showSmodel() {
$("#smodel").show();
}
function hideSmodel() {
$("#smodel").hide();
}
function showTurnon() {
$("#turnon").show();
}
function hideTurnon() {
$("#turnon").hide();
}
function showLiquiddamage() {
$("#liquiddamage").show();
}
function hideLiquiddamage() {
$("#liquiddamage").hide();
}
function showResult() {
$("#result").show();
}
function hideResult() {
$("#result").hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="tabletmobilerepairform">
<div class="col-md-12 col-sm-12 col-xs-12 nopad" id="create">
<div class="form-group text-center">
<b>Is it a tablet or a phone?</b><br />
<div class="radio" id="phone">
<label>
<input type="radio" name="phone" id="phone_yes" value="1">
It's a tablet.
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="phone" id="phone_no" value="0">
It's a phone.
</label>
</div>
</div><br/> <!-- tablets or phones -->
<div class="form-group" id="brand">
<b>What is the brand of your phone?</b><br />
<label>
<input type="radio" name="brand" id="applephone" value="b1">
Apple
</label><br/>
<label>
<input type="radio" name="brand" id="samsungphone" value="b2">
Samsung
</label><br/>
<label>
<input type="radio" name="brand" id="nokiaphone" value="b3">
Nokia
</label><br/>
<label>
<input type="radio" name="brand" id="sonyphone" value="b4">
Sony
</label><br/>
<label>
<input type="radio" name="brand" id="otherphone" value="b5">
Other
</label>
</div><br/> <!-- Which brand of phones -->
<div class="form-group" id="ipmodel">
<b>What is the model of your phone?</b><br />
<select class="form-control" name="ipmodel" id="ipmodel">
<option value="i1" id="ip5">iPhone 5</option>
<option value="i2" id="ip5c">iPhone 5c</option>
<option value="i3" id="ip5s">iPhone 5s</option>
<option value="i4" id="ip6">iPhone 6</option>
<option value="i5" id="ip6p">iPhone 6 Plus</option>
<option value="i6" id="ipse">iPhone SE</option>
<option value="i7" id="ip6s">iPhone 6s</option>
<option value="i8" id="ip6sp">iPhone 6s Plus</option>
<option value="i9" id="ip7">iPhone 7</option>
<option value="i10" id="ip7p">iPhone 7 Plus</option>
<option value="i11" id="ip8">iPhone 8</option>
<option value="i12" id="ip8p">iPhone 8 Plus</option>
<option value="i13" id="ipx">iPhone X</option>
<option value="i14" id="ipo">Other</option>
</select>
</div><br/> <!-- Apple phones -->
<div class="form-group" id="stype">
<b>Is it a Samsung Galaxy S series or Galaxy Note series phone?</b><br />
<select class="form-control" name="stype" id="stype">
<option value="st1" id="gss">Galaxy S series</option>
<option value="st2" id="gns">Galaxy Note series</option>
<option value="st3" id="go">Other</option>
</select>
</div><br/> <!-- Samsung what phones -->
<div class="form-group" id="sgsmodel">
<b>What is the model of your phone?</b><br />
<select class="form-control" name="sgsmodel" id="sgsmodel">">
<option value="g1" id="gs4">Galaxy s4</option>
<option value="g2" id="gs5">Galaxy s5</option>
<option value="g3" id="gs6">Galaxy s6</option>
<option value="g4" id="gs6e">Galaxy s6 Edge</option>
<option value="g5" id="gs6ep">Galaxy s6 Edge+</option>
<option value="g6" id="gs7">Galaxy s7</option>
<option value="g7" id="gs7e">Galaxy s7 Edge</option>
<option value="g8" id="gs8">Galaxy s8</option>
<option value="g9" id="gs8p">Galaxy s8+</option>
<option value="g10" id="gs9">Galaxy s9</option>
<option value="g11" id="gs9p">Galaxy s9+</option>
<option value="g12" id="gso">Other</option>
</select>
</div><br/> <!-- Samsung S phones -->
<div class="form-group" id="sgnmodel">
<b>What is the model of your phone?</b><br />
<select class="form-control" name="sgnmodel" id="sgnmodel">">
<option value="sgn1" id="gn3">Galaxy Note 3</option>
<option value="sgn2" id="gn4">Galaxy Note 4</option>
<option value="sgn3" id="gne">Galaxy Note Edge</option>
<option value="sgn4" id="gn5">Galaxy Note 5</option>
<option value="sgn5" id="gn7">Galaxy Note 7</option>
<option value="sgn6" id="gnfe">Galaxy Note Fan Edition</option>
<option value="sgn7" id="gn8">Galaxy Note 8</option>
<option value="sgn8" id="gn9">Galaxy Note 9</option>
<option value="sgn9" id="gno">Other</option>
</select>
</div><br/> <!-- Samsung Note phones -->
<div class="form-group" id="nmodel">
<b>What is the model of your phone?</b><br />
<select class="form-control" name="nmodel" id="nmodel">">
<option value="nn1" id="n3">Nokia 3</option>
<option value="nn2" id="n5">Nokia 5</option>
<option value="nn3" id="n6">Nokia 6</option>
<option value="nn4" id="n8">Nokia 8</option>
<option value="nn5" id="n31">Nokia 3.1 2018 version</option>
<option value="nn6" id="n51">Nokia 5.1 2018 version</option>
<option value="nn7" id="n61">Nokia 6.1 2018 version</option>
<option value="nn8" id="no">Other</option>
</select>
</div><br/> <!-- Nokia phones -->
<div class="form-group" id="smodel">
<b>What is the model of your phone?</b><br />
<select class="form-control" name="smodel" id="smodel">">
<option value="x1" id="xz3">Xperia Z3</option>
<option value="x2" id="xz4">Xperia Z4</option>
<option value="x3" id="xz5">Xperia Z5</option>
<option value="x4" id="xx">Xperia X</option>
<option value="x5" id="xxa">Xperia XA</option>
<option value="x6" id="xxz">Xperia XZ</option>
<option value="x7" id="xxa1">Xperia XA1</option>
<option value="x8" id="xo">Other</option>
</select>
</div><br/> <!-- Sony phones -->
<div class="radio" id="turnon">
<b>Does it still turn on?</b><br />
<label>
<input type="radio" name="turnon" id="turnon_yes" value="t1">
Yup it turns on.
</label>
<label>
<input type="radio" name="turnon" id="turnon_no" value="t0">
No it doesn't!
</label>
</div><br/> <!--if device can power on or not -->
<div class="radio" id="liquiddamage">
<b>Has it been liquid damaged?</b><br />
<label>
<input type="radio" name="liquiddamage" id="liquiddamage_yes" value="111">
Yup it went for a swim.
</label>
<label>
<input type="radio" name="liquiddamage" id="liquiddamage_no" value="110">
Nope.
</label>
</div><br/> <!-- if device's been liquid damaged -->
<div class="form-group" id="problem">
<b>General Services</b><br />
<label>
<input type="radio" name="problem" id="problem" value="p1">
Screen Replacement (Original Quality)
</label><br/>
<label>
<input type="radio" name="problem" id="problem" value="p2">
Screen Replacement (Aftermarket Quality)
</label><br/>
<label>
<input type="radio" name="problem" id="problem" value="p3">
Battery Replacement
</label><br/>
<label>
<input type="radio" name="problem" id="problem" value="p4">
Power Button Replacement
</label><br/>
<label>
<input type="radio" name="problem" id="problem" value="p5">
Volume/Mute Button Replacement
</label><br/>
<label>
<input type="radio" name="problem" id="problem" value="p6">
Loudspeaker Replacement
</label><br/>
<label>
<input type="radio" name="problem" id="problem" value="p7">
Earpiece Replacement
</label><br/>
<label>
<input type="radio" name="problem" id="problem" value="p8">
Microphone Replacement
</label><br/>
<label>
<input type="radio" name="problem" id="problem" value="p9">
Charging Port Replacement
</label><br/>
<label>
<input type="radio" name="problem" id="problem" value="p10">
Front Camera Replacement
</label><br/>
<label>
<input type="radio" name="problem" id="problem" value="p11">
Rear Camera Replacement
</label><br/>
<label>
<input type="radio" name="problem" id="problem" value="p12">
Proximity Sensor Replacement
</label><br/>
<label>
<input type="radio" name="problem" id="problem" value="p13">
Home Button Replacement
</label><br/>
</div><br/> <!-- list of repairs -->
<div id="result">
<b>So the estimated total cost is</b><br />
<input type="text" id="finalpriceexcvat" />
</div> <!--Total cost-->
</div>
</form>
答案 0 :(得分：0)
（我的英语不好。请原谅我，如果我写过或写了任何可怕的话） 无需使用ID，您可以通过使用“类”来简化此操作
<div class="form-group text-center">
<b>Is it a tablet or a phone?</b><br />
<div class="radio" id="phone">
<label>
<input type="radio" name="phone" id="phone_yes" value="1" class="phone_values">
It's a tablet.
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="phone" id="phone_no" value="0" class="phone_values">
It's a phone.
</label>
</div>
</div>
函数如下：
$(document).ready(function() {
showProblem();
hideBrand();
hideProblem();
hideIpmodel();
hideStype();
hideSgsmodel();
hideSgnmodel();
hideNmodel();
hideSmodel();
hideTurnon();
hideLiquiddamage();
var phone_values = document.getElementsByClassName( "phone_values" );
for( var a = 0; a < phone_values.length; a++ ) {
phone_values[a].addEventListener( "click", function() {
showBrand(); //call the function you want to show next.
//no need to call hide functions.
}
}
} );
如果您这样做，
document.getElementById('gns').addEventListener('click', function() {
showBrand();
hideProblem();
hideIpmodel();
showStype(); //show
hideSgsmodel();
showSgnmodel();
hideNmodel();
hideSmodel();
hideTurnon();
hideLiquiddamage();
});
document.getElementById('nokiaphone').addEventListener('click', function() {
showBrand();
hideProblem();
hideIpmodel();
hideStype(); //hide*
hideSgsmodel();
hideSgnmodel();
showNmodel();
hideSmodel();
hideTurnon();
hideLiquiddamage();
});
当您选择'gns'时，类型开始显示。但是只要选择类型，它就会自己隐藏类型。因此，每次只调用要显示的功能。