Question

我试图根据是否设置了隐藏字段值来单击隐藏单选按钮时显示/显示div。我的代码设置方式，只有第一个分组起作用（text1），其余分组却不起作用，并且我收到一条控制台消息，提示它“无法读取null的属性'值'”。

我已经三遍检查了我的ID名称，如果我将另一个ID切换为序列中的第一个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();

      }

},);

Answer 1

您的html中必须有一个错误。推断您的html 应该是什么样，并使用javascript可以正常工作：

$(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

而且，我可能会补充说（因为是2018年），而无需使用jQuery也可以做同样的事情，而无需进行额外的工作：

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';
  }

});

然后您可以使其更整洁：

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';
  });

});

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

1 个答案:

Soapbox