Question

我有这个部分代码，正如你所看到它包含许多复选框，无线电和隐藏类。我试着按照我所知写的，但是当条件列表变得更长时它变得复杂并且看起来很难编写代码。所以我的问题是，是否有更好的方法来显示和隐藏许多类，并隐藏清晰的chexboexes和无线电？提前谢谢。

function showData() {
  if (relativeYes.checked) {
    document.getElementById('relativeConditions').style.display = 'block';
 
  } else {
    document.getElementById('relativeConditions').style.display = 'none';
  }
  if (relativeNo.checked) {
    document.getElementById('verification').style.display = 'block';
  }
  else {
    document.getElementById('verification').style.display = 'none';
  }
 
  if (no.checked) {
    document.getElementById('output').innerHTML = 'Nope';
    document.getElementById('gender').style.display = 'none';
  }
  else {
    document.getElementById('output').innerHTML = '';
  }
  if (yes.checked) {
    document.getElementById('profiling').style.display = 'block';
  }
  else {
    document.getElementById('profiling').style.display = 'none';
  }
  if (profilingYes.checked) {
    document.getElementById('output').innerHTML = 'DO';
    document.getElementById('secondPart').style.display = 'none';
  } else {
    document.getElementById('secondPart').style.display = 'block';
  }
  if (profilingNo.checked) {
    document.getElementById('gender').style.display = 'block';
  }
  if (yes.checked && male.checked) {
    document.getElementById('maleDiagnosis').style.display = 'block';
  } else {
    document.getElementById('maleDiagnosis').style.display = 'none';
  }
  if (yes.checked && female.checked) {
    document.getElementById('femaleDiagnosis').style.display = 'block';
  }
  else {
    document.getElementById('femaleDiagnosis').style.display = 'none';
  }
  if (maleMlm.checked === true && maleDiagnosis.style.display == 'block') {
    document.getElementById('output').innerHTML = 'DO';
  }
 
  else if (malePrt.checked) {
    document.getElementById('output').innerHTML = 'OTHER';
 
  }
  if (malePn.checked === true && maleMlm.checked === false) {
    document.getElementById('jaw').style.display = 'block'
  }
 
  else {
    document.getElementById('jaw').style.display = 'none'
  }
  if (maleMlm.checked === false && malePn.checked === true && malePrt.checked === true) {
    document.getElementById('output').innerHTML = '';
  }
  if (jawYes.checked) {
    document.getElementById('output').innerHTML = 'DO';
  }
  else if (jawNo.checked) {
    document.getElementById('output').innerHTML = 'OTHER';
  }
 
  if ((maleMlm.checked || malePrt.checked || malePn.checked) && maleDiagnosis.style.display == 'none') {
    maleMlm.checked = maleMlm.unchecked;
    malePrt.checked = malePrt.unchecked;
    malePn.checked = malePn.unchecked;
  }
  if ((jawYes.checked || jawNo.checked) && document.getElementById('jaw').style.display == 'none') {
    jawYes.checked = jawYes.unchecked;
    jawNo.checked = jawNo.unchecked;
  }
  if ((profilingNo.checked || profilingYes.checked) && profiling.style.display == 'none') {
    profilingNo.checked = profilingNo.unchecked;
    profilingYes.checked = profilingYes.unchecked;
 
  }
 

}
 
function clearRadios(id) {
  var Radios = document.getElementById(id).getElementsByTagName('input');
  for (var i = 0; i < Radios.length; i++) {
    if (Radios[i].type == 'radio') {
      Radios[i].checked = false;
    }
  }
}
 

 
document.getElementById('container').addEventListener('change', showData);

#jaw,
#age,
#profiling,
#secondPart,
#verification,
#maleDiagnosis,
#femaleDiagnosis,
#relativeConditions, 
#gender {
  display: none;
}

<body>
 
  <div id="container" onchange="showData();">
 
    <div id="relative">
 
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque, laboriosam ? 
      Yes<input id="relativeYes" type="radio" name="relative" onchange="clearRadios('none')"> 
      No<input id="relativeNo"  type="radio" name="relative">
 
    </div>
 
    <div id="relativeConditions">
      1. Lorem ipsum dolor sit amet consectetur, adipisicing elit. <input type="radio" name="relaiveConditionsCheck"><br> 
      2. Lorem ipsum dolor sit.****<input type="radio" name="relaiveConditionsCheck"><br> 
      3. Lorem ipsum dolor sit amet consectetur.<input type="radio" name="relaiveConditionsCheck"><br> 
      4. Lorem ipsum dolor sit amet consectetur adipisicing.<input type="radio" name="relaiveConditionsCheck">
 
    </div>
 
    <div id="none">
 
      <div id="verification">
 
        Lorem ipsum dolor sit?<br> 
        Yes <input id="yes" type="radio" name="verification"> 
        No<input id="no" type="radio" name="verification"><br>
 
      </div>
 
      <div id="profiling">
 
          Lorem ipsum dolor sit amet ?
        Yes<input id="profilingYes" name="profiling" type="radio">
        No<input id="profilingNo" name="profiling" type="radio">
 
      </div>
 
      <div id="secondPart">
 
        <div id="gender">
 
          GEnder:
          Male</label><input id="male" type="radio" name="gender" >
          Female</label> <input id="female" type="radio" name="gender" ><br>
 
        </div>
        <div id="maleDiagnosis">
            Mlm<input id="maleMlm"  type="checkbox"> 
            Prt <input id="malePrt" type="checkbox"> 
            Pn<input id="malePn" type="checkbox" ><br>
    </div>
 
    <p id="jaw">
 
      Lorem ipsum dolor sores?
        Yes<input id="jawYes" type="radio" name="jaw"> 
        No<input id="jawNo" type="radio" name="jaw">
 
      </p>
 
  <div id="femaleDiagnosis" >
   Mm<input type="checkbox">
   Or<input type="checkbox"> 
   Pan<input type="checkbox"><br>
  </div>
 
</div>
  
</div>
 
<span style="color:red">Output:</span><span id="output"> </span>
</div>
 
</body>

Answer 1

您可以做出的最佳改变是使用三元运算符（reference）。三元运算符是编写脚本很重的If / Else语句的一种有效的简便方法。

三元运算符本质上是先通过一个条件（例如你的IF语句），然后是一个表达式来评估该条件何时为真，然后是条件为假时要评估的表达式。这被风格化为： condition ? expr1 : expr2。

仅举几个例子，六行代码可以压缩成一行：

if (relativeYes.checked) {
    document.getElementById('relativeConditions').style.display = 'block';
  }
else {
    document.getElementById('relativeConditions').style.display = 'none';
  }

......变成一条线......

relativeYes.checked ? document.getElementById('relativeConditions').style.display = 'block' : document.getElementById('relativeConditions').style.display = 'none';

除此之外，我建议缓存＆amp;存储所有DOM引用，因为任何输入中的任何值都会随时调用showData()函数（例如经常）。

最后，通常建议在元素中添加/删除类作为隐藏或显示它的方法，而不是将style.display属性连续设置为block和none。

此CodePen实现了所有这些增强功能，将JS块的大小设置为原始版本的近一半： https://codepen.io/anon/pen/YrxeXx

注意：在现实世界中，你不会像我在这里那样在全局空间中声明所有这些变量，这只是为了权宜之计。 / p>

是否有更好的方法来显示和隐藏大量元素并取消选中隐藏的复选框？

1 个答案: