使用空值查找具有相同类的下一个元素

I have an html structure like this:

我有一个像这样的html结构：

<span class="btn btn-default btn-file">
  Upload Logo
  <input id="logo24" class="input-logo" name="options_24_file" type="file">
  <input style="display:none;" value="save_new" name="options_24_file_action" type="text">
  <input style="display:none;" id="logo27" class="input-logo" name="options_27_file" type="file">
  <input style="display:none;" value="save_new" name="options_27_file_action" type="text">
  <input style="display:none;" id="logo22" class="input-logo" name="options_22_file" type="file">
  <input style="display:none;" value="save_new" name="options_22_file_action" type="text">
  <input style="display:none;" id="logo25" class="input-logo" name="options_25_file" type="file">
  <input style="display:none;" value="save_new" name="options_25_file_action" type="text">
  <input style="display:none;" id="logo28" class="input-logo" name="options_28_file" type="file">
  <input style="display:none;" value="save_new" name="options_28_file_action" type="text">
  <input style="display:none;" id="logo23" class="input-logo" name="options_23_file" type="file">
  <input style="display:none;" value="save_new" name="options_23_file_action" type="text">
  <input style="display:none;" id="logo12" class="input-logo" name="options_12_file" type="file">
  <input style="display:none;" value="save_new" name="options_12_file_action" type="text">
  <input style="display:none;" id="logo26" class="input-logo" name="options_26_file" type="file">
  <input style="display:none;" value="save_new" name="options_26_file_action" type="text">
  <input style="display:none;" id="logo21" class="input-logo" name="options_21_file" type="file">
  <input style="display:none;" value="save_new" name="options_21_file_action" type="text">
  <input style="display:none;" id="logo29" class="input-logo" name="options_29_file" type="file">
  <input style="display:none;" value="save_new" name="options_29_file_action" type="text">
</span>

the above html have input type file with same class name which is input-logo, the first input will show up at first, and when the input value change i want to hide it, and show next input which still has empty value to show up so i can input another file, so far i've tried this:

上面的html输入类型文件具有相同的类名，即输入标识，第一个输入将首先显示，当输入值改变时我想隐藏它，并显示仍然有空值的下一个输入显示所以我可以输入另一个文件，到目前为止我已经尝试过：

$('.input-logo').change(function() {
   var id = $(this).attr('id');
   //get next class with no value and show it????
   //hide current element
   $(this).hide();
});

1 个解决方案

#1

Try this :

尝试这个 ：

 $('.input-logo').change(function() {
     var id = $(this).attr('id');

     //hide current element
     $(this).hide();

     // check for null value
     $(".input-logo").each(function() {
       var input_val =$(this).val();
       if(input_val.trim()=='' || input_val==="undefined")
       {
         //perform action as you want
       }
       });
  });