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

时间:2017-05-18 09:17:20

标签: javascript jquery html

我有一个像这样的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>

以上html的输入类型文件具有相同的类名input-logo,第一个输入将首先显示,当输入值改变时我想隐藏它,并显示仍然有的下一个输入要显示的空值,以便我可以输入另一个文件,到目前为止,我已尝试过:

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

1 个答案:

答案 0 :(得分:1)

试试这个:

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