时间戳

首页 > 解决方案 > 隐藏 div 仅适用于第一个 if 语句

javascript - 隐藏 div 仅适用于第一个 if 语句

问题描述

我试图在单击收音机时隐藏/显示 div，这取决于是否设置了隐藏字段值。我的代码设置方式，只有第一个分组正在运行（text1），其余的都没有，我收到一条控制台消息，它“无法读取 null 的属性'值'”。

我已经三次检查了我的 ID 名称，如果我将不同的 ID 切换为序列中的第一个，它将起作用，然后之前的第一个将不再起作用。

在我单击 radio1 之前，我没有收到任何代码错误，但是某些内容的格式不正确吗？有没有更好的方法来列出我想要检查其值的文本字段？

$(document).on('click', '#radio1', function() {

if(document.getElementById('text1').value > 0 ) {

         $('#div1').hide();
         $('#div2').hide();
         $('#div3').hide();
         $('#div4').hide();     
}
else if(document.getElementById('text2').value > 0 ) {

         $('#div1').hide();
         $('#div2').hide();
         $('#div3').hide();
         $('#div4').hide();  
}
else if(document.getElementById('text3').value > 0 ) {

         $('#div1').hide();
         $('#div2').hide();
         $('#div3').hide();
         $('#div4').hide();    
}
else  {

         $('#div1').show();
         $('#div2').show();
         $('#div3').show();
         $('#div4').show();

      }

},);

标签： javascriptjquery

解决方案

You must have an error in your html. Inferring what your html should look like, and using your javascript works just fine: 

$(document).on('click', '#radio1', function() {

  if (document.getElementById('text1').value > 0) {

    $('#div1').hide();
    $('#div2').hide();
    $('#div3').hide();
    $('#div4').hide();
  } else if (document.getElementById('text2').value > 0) {

    $('#div1').hide();
    $('#div2').hide();
    $('#div3').hide();
    $('#div4').hide();
  } else if (document.getElementById('text3').value > 0) {

    $('#div1').hide();
    $('#div2').hide();
    $('#div3').hide();
    $('#div4').hide();
  } else {

    $('#div1').show();
    $('#div2').show();
    $('#div3').show();
    $('#div4').show();

  }

}, );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

#radio1: <input type="radio" value="1" id="radio1">
<br> #text1: <input id="text1" type="text">
<br> #text2: <input id="text2" type="text">
<br> #text3: <input id="text3" type="text">
<div id="div1">
  one
</div>
<div id="div2">
  two
</div>
<div id="div3">
  three
</div>
<div id="div4">
  four
</div>

Soapbox

And, I might add (because it's 2018) you can do the same thing without jQuery with no extra work: 

document.getElementById('radio1').addEventListener('click', function() {

    var t1 = document.getElementById('text1'),
    t2 = document.getElementById('text2'),
        t3 = document.getElementById('text3'),
    divs = [
        document.getElementById('div1'),
        document.getElementById('div2'),
        document.getElementById('div3'),
        document.getElementById('div4')
    ];

  if( t1.value  ) {
    for(var i=0;i<divs.length;i++)
      divs[i].style.display = 'none';
  }
  else if( t2.value > 0 ) {
    for(var i=0;i<divs.length;i++)
      divs[i].style.display = 'none';
  }
  else if( t3.value > 0 ) {
    for(var i=0;i<divs.length;i++)
      divs[i].style.display = 'none';
  }
  else {
    for(var i=0;i<divs.length;i++)
      divs[i].style.display = 'block';
  }

});

And then you can make it even cleaner: 

document.getElementById('radio1').addEventListener('click', function() {

    var t1 = document.getElementById('text1'),
    t2 = document.getElementById('text2'),
        t3 = document.getElementById('text3'),
    divs = [
        document.getElementById('div1'),
        document.getElementById('div2'),
        document.getElementById('div3'),
        document.getElementById('div4')
    ];

    divs.forEach(function(div){
        if( t1.value || t2.value || t3.value )
            div.style.display = 'none';
       else
            div.style.display = 'block';
  });

});

推荐阅读