我有加/减按钮,用于描述通过算法进行的导航。就目前而言,我已经进行了设置,因此,当您单击减号按钮时,它将折叠所有后续的div,并清除从该点开始的单选按钮选择。但是,我还需要它重置折叠按钮下方的所有“加号”按钮,以便用户在选择单选按钮之前会看到已禁用的前进按钮。
有没有一种方法可以将其添加到“隐藏”功能中,以重置包含原始加号按钮的每个div?如果可能的话,我不想使用Jquery。
我仍在学习javascript,所以我希望这是有道理的。谢谢!
var image = document.getElementById("plus");
function changeSign(name) {
var image = document.getElementsByName(name)[0];
if (image.getAttribute('src') == "image/plus_btn.png") {
image.src = "image/minus_btn.png";
console.log("Showing");
} else {
image.src = "image/plus_btn.png";
}
}
function show1(name) {
changeSign(name);
var image = document.getElementsByName(name)[0];
if (image.getAttribute('src') == "image/plus_btn.png") {
console.log("hiding")
document.getElementById('div1').style.display = 'none';
document.getElementById("div1pos").checked = false;
document.getElementById("div1neg").checked = false;
document.getElementById('div11').style.display = 'none';
document.getElementById("div11pos").checked = false;
document.getElementById("div11neg").checked = false;
document.getElementById('div2').style.display = 'none';
document.getElementById("div2norm").checked = false;
document.getElementById("div2abn").checked = false;
document.getElementById('div4').style.display = 'none';
document.getElementById("div4norm").checked = false;
document.getElementById("div4abn").checked = false;
document.getElementById('div4_1').style.display = 'none';
document.getElementById('div5').style.display = 'none';
document.getElementById('div6').style.display = 'none';
document.getElementById('div7').style.display = 'none';
document.getElementById('div8').style.display = 'none';
document.getElementById('div9').style.display = 'none';
document.getElementById('div10').style.display = 'none';
document.getElementById('div12').style.display = 'none';
document.getElementById('div13').style.display = 'none';
document.getElementById("div13first").checked = false;
document.getElementById("div13secorthird").checked = false;
document.getElementById('div14').style.display = 'none';
document.getElementById('div15').style.display = 'none';
document.getElementById("div15norm").checked = false;
document.getElementById("div15abnml").checked = false;
document.getElementById('div16').style.display = 'none';
document.getElementById('div17').style.display = 'none';
document.getElementById('div18').style.display = 'none';
document.getElementById('div19').style.display = 'none';
document.getElementById('div20').style.display = 'none';
document.getElementById("div20yes").checked = false;
document.getElementById("div20no").checked = false;
document.getElementById('div21').style.display = 'none';
document.getElementById("div21norm").checked = false;
document.getElementById("div21abnorm").checked = false;
document.getElementById('div22').style.display = 'none';
document.getElementById('div23').style.display = 'none';
document.getElementById('div24').style.display = 'none';
document.getElementById('div25').style.display = 'none';
document.getElementById('div26').style.display = 'none';
document.getElementById('div27').style.display = 'none';
document.getElementById('div28').style.display = 'none';
document.getElementById("div28norm").checked = false;
document.getElementById("div28abnorm").checked = false;
document.getElementById('div29').style.display = 'none';
document.getElementById('div30').style.display = 'none';
document.getElementById('div31').style.display = 'none';
} else {
if (document.querySelector('input#div0symp').checked) {
console.log("div1");
document.getElementById('div11').style.display = 'none';
document.getElementById('div1').style.display = 'block';
}
if (document.querySelector('input#div0asymp').checked) {
console.log("div11")
document.getElementById('div1').style.display = 'none';
document.getElementById('div11').style.display = 'block';
}
}
}
function show2(name) {
changeSign(name);
var image = document.getElementsByName(name)[0];
if (image.getAttribute('src') == "image/plus_btn.png") {
document.getElementById('div4').style.display = 'none';
document.getElementById("div4norm").checked = false;
document.getElementById("div4abn").checked = false;
document.getElementById('div2').style.display = 'none';
document.getElementById("div2norm").checked = false;
document.getElementById("div2abn").checked = false;
document.getElementById('div13').style.display = 'none';
document.getElementById("div13first").checked = false;
document.getElementById("div13secorthird").checked = false;
document.getElementById('div12').style.display = 'none';
document.getElementById('div4_1').style.display = 'none';
document.getElementById('div5').style.display = 'none';
document.getElementById('div6').style.display = 'none';
document.getElementById('div7').style.display = 'none';
document.getElementById('div8').style.display = 'none';
document.getElementById('div9').style.display = 'none';
document.getElementById('div10').style.display = 'none';
document.getElementById('div11').style.display = 'none';
document.getElementById("div11pos").checked = false;
document.getElementById("div11neg").checked = false;
document.getElementById('div14').style.display = 'none';
document.getElementById('div15').style.display = 'none';
document.getElementById("div15norm").checked = false;
document.getElementById("div15abnml").checked = false;
document.getElementById('div16').style.display = 'none';
document.getElementById('div17').style.display = 'none';
document.getElementById('div18').style.display = 'none';
document.getElementById('div19').style.display = 'none';
document.getElementById('div20').style.display = 'none';
document.getElementById("div20yes").checked = false;
document.getElementById("div20no").checked = false;
document.getElementById('div21').style.display = 'none';
document.getElementById("div21norm").checked = false;
document.getElementById("div21abnorm").checked = false;
document.getElementById('div22').style.display = 'none';
document.getElementById('div23').style.display = 'none';
document.getElementById('div24').style.display = 'none';
document.getElementById('div25').style.display = 'none';
document.getElementById('div26').style.display = 'none';
document.getElementById('div27').style.display = 'none';
document.getElementById('div28').style.display = 'none';
document.getElementById("div28norm").checked = false;
document.getElementById("div28abnorm").checked = false;
document.getElementById('div29').style.display = 'none';
document.getElementById('div30').style.display = 'none';
document.getElementById('div31').style.display = 'none';
} else {
if (document.querySelector('input#div0symp').checked &&
document.querySelector('input#div1pos').checked) {
document.getElementById('div2').style.display = 'none';
document.getElementById('div13').style.display = 'none';
document.getElementById('div12').style.display = 'none';
document.getElementById('div4').style.display = 'block';
}
if (document.querySelector('input#div0symp').checked &&
document.querySelector('input#div1neg').checked) {
document.getElementById('div4').style.display = 'none';
document.getElementById('div13').style.display = 'none';
document.getElementById('div12').style.display = 'none';
document.getElementById('div2').style.display = 'block';
}
if (document.querySelector('input#div0asymp').checked &&
document.querySelector('input#div11pos').checked) {
document.getElementById('div4').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div12').style.display = 'none';
document.getElementById('div13').style.display = 'block';
}
if (document.querySelector('input#div0asymp').checked &&
document.querySelector('input#div11neg').checked) {
document.getElementById('div4').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div13').style.display = 'none';
document.getElementById('div12').style.display = 'block';
}
}
}
function enableBtn(name) {
var btn = document.getElementsByName(name)[0];
btn.removeAttribute("disabled");
btn.setAttribute("style", "opacity:1;")
}
<body>
<h1 align="center">Evaluation of a Patient</h1>
<div id="div0" class="show" align="center">
<div id="test0" class="action" align="left">
<p align="left">Test patient andd perform a symptom screen</p>
<label> <input type="radio" name="tab" id='div0symp' value="symptomatic" onClick="enableBtn('plus0');"/> <span>Patient is symptomatic </span></label> <br>
<label> <input type="radio" name="tab" id='div0asymp' value="asymptomatic" onClick="enableBtn('plus0');"/> <span>Patient is asymptomatic </span>
</label>
</div>
<div id="plus0" class="nextbutton" align="center">
<input type="image" src="image/plus_btn.png" width="40" name="plus0" disabled="disabled" style="opacity:0.3;" onclick="show1('plus0');" />
</div>
</div>
<div id="div1" class="hide" align="center">
<div id="div100" class="show" align="center">
<img id="arrow" src="image/arrow-black.gif" alt="MISSING GIF">
</div>
<div id="TST1" class="action" align="left">
<p>
Test the patient<br>Test Result is:
</p>
<label><input type="radio" id='div1pos' name="tab2" value="positive" onClick="enableBtn('plus1');"/> <span>Positive</span> </label> <br>
<label><input type="radio" id='div1neg' name="tab2" value="negative" onClick="enableBtn('plus1');"/> <span>Negative</span></label>
</div>
<div id="plus1" class="nextbutton" align="center">
<input type="image" src="image/plus_btn.png" width="40" name="plus1" disabled="disabled" style="opacity:0.3;" onclick="show2('plus1');" />
</div>
</div>