javascript if语句在做

Question

I am trying to get this snip of code to work in a while loop instead of an if. I need each instant of num_# to not be displayed if the printLoad_# val is empty. So if printLoad_1 value = nothing, the Num_1 would not be displayed, and then the printLoad_2 would check to see if its num_2 is empty and so on. The problem I am having is the function stops before checking each section. Im not sure if a do-while will work.

$(document).ready(function() {
    if(document.getElementById("printLoad_1").value == "")
    {
        document.getElementById('num_1').style.display = 'none';
    }
    if(document.getElementById("printLoad_2").value == "")
    {
        document.getElementById('num_2').style.display = 'none';
    }
    if(document.getElementById("printLoad_3").value == "")
    {
        document.getElementById('num_3').style.display = 'none';
    }
    if(document.getElementById("printLoad_4").value == "")
    {
        document.getElementById('num_4').style.display = 'none';
    }
    if(document.getElementById("printLoad_5").value == "")
    {
        document.getElementById('num_5').style.display = 'none';
    }
});

Answer 1

Have you considered just compositing the strings instead of this verbose construction? Something like this:

for( var i=1; i<=5; i++ ) {
  if( document.getElementById('printLoad_'+i).value === '' ) {
      document.getElementById('num_'+i).style.display = 'none';
  }
}

Answer 2

Assuming you're using jQuery and that your elements are in order, I'd forget about ID's. If you use common classes, say .printload and .num , then you can easily target elements by index like:

$('.printload').each(function(i){
  if (!this.value) $('.num').eq(i).hide();
});

Answer 3

if you have a variable amount of printLoad and num:

var i = 1,
pl=document.getElementById('printLoad_'+i),
num = document.getElementById('num_'+i);
while(pl !== null && num !== null){
  if(pl.value === ""){
    num.style.display = 'none';
  }
  i++;
  pl=document.getElementById('printLoad_'+i),
  num = document.getElementById('num_'+i);
}

Answer 4

Here is a slight modification of Ethan's answer that "works dynamically". I've also updated it to use jQuery. This could be handled cleaner if CSS classes and a hierarchy relationship were used, but that would affect how the DOM needed to be generated ..

for (var i = 1; /* break */; i++) {
    var printEl = $('#printLoad_' + i)
    if (printEl.length) {
        if (!printEl.val()) {
            $('#num_' + i).css({display: 'none'})
        }
    } else {
        // No #printLoad_N, guess we're done looking
        break
    }
}

Answer 5

Per @elclanr 's answer:

Use common classes, and target elements by index, it'll be much simpler.

Set your "printLoad" elements to class='printLoad' and your "num" elements to class='num' . Then...

for (i=0;i<document.getElementByClass('printLoad').length;i++)
{
    if (document.getElementByClass('printLoad')[i].value == "")
    {
        document.getElementByClass('num')[i].style.display='none';
    }
}