主页 / 问题 / 1446676
Accepted
Егор
Asked:2022-09-08 08:48:20 +0000 UTC2022-09-08 08:48:20 +0000 UTC

如果输入为空则隐藏元素

  • 772

可能是个奇怪的问题，但是我需要做的是，当四个输入中的一个被填充时，显示一个还有四个的块，我通过 JS 实现了这个，但后来发现这种方法并不完全正确，因为如果所有 4 个字段都已填写，并且从输入开始的字段中删除文本，则下一个块消失，但它必须保留到至少一个字段中至少有一个字符，如果有在任何字段中都没有字符，那么您已经可以消失）））

如何实施？

$('input[name="form_text_163"], input[name="form_text_219"], input[name="form_text_220"], input[name="form_text_221"]').on('keyup',function(){
        var $this = $(this),
      val = $this.val();
  
        if(val.length >= 1){
            $('.stroka-2').show(100);
        }else {
            $('.stroka-2').hide(100);
        }
    });
.tabl-stroka {
        display: flex;
        width: 100%;
    
    }

    .tabl-1 input {
        width: 20%;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabl-stroka stroka-1">
                    <input type="text" class="inputtext" name="form_text_163" value="" size="0"><br>
                    <input type="text" class="inputtext" name="form_text_219" value="" size="0"><br>
                    <input type="text" class="inputtext" name="form_text_220" value="" size="0"><br>
                    <input type="text" class="inputtext" name="form_text_221" value="" size="0"><br>
                </div>
                    
                <div class="tabl-stroka stroka-2" style="display: none;">
                    <input type="text" class="inputtext" name="form_text_222" value="" size="0"><br>
                    <input type="text" class="inputtext" name="form_text_223" value="" size="0"><br>
                    <input type="text" class="inputtext" name="form_text_224" value="" size="0"><br>
                    <input type="text" class="inputtext" name="form_text_225" value="" size="0"><br>
                </div>

javascript

0 个回答

  1. Best Answer

    例如，像这样：

    let inputs = document.querySelectorAll('input');
inputs.forEach(inp => inp.addEventListener('keyup', function() {
      let inputsEmpty = true;
      inputs.forEach(function(inp) {
          inputsEmpty = (inp.value.length !== 0) ? false : inputsEmpty;
        });
        if (!inputsEmpty) {
          $('.stroka-2').show(100);  
        } else {
          $('.stroka-2').hide(100);
        }
      }));
    .tabl-stroka {
  display: flex;
  width: 100%;
}

.tabl-1 input {
  width: 20%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabl-stroka stroka-1">
  <input type="text" class="inputtext" name="form_text_163" value="" size="0"><br>
  <input type="text" class="inputtext" name="form_text_219" value="" size="0"><br>
  <input type="text" class="inputtext" name="form_text_220" value="" size="0"><br>
  <input type="text" class="inputtext" name="form_text_221" value="" size="0"><br>
</div>

<div class="tabl-stroka stroka-2" style="display: none;">
  <input type="text" class="inputtext" name="form_text_222" value="" size="0"><br>
  <input type="text" class="inputtext" name="form_text_223" value="" size="0"><br>
  <input type="text" class="inputtext" name="form_text_224" value="" size="0"><br>
  <input type="text" class="inputtext" name="form_text_225" value="" size="0"><br>
</div>

    • 2 

  2. let inputs1 = table1.querySelectorAll('input');
inputs1.forEach(inp => inp.addEventListener('keyup', function() {
      let inputsEmpty = true;
      inputs1.forEach(function(inp) {
          inputsEmpty = (inp.value.length !== 0) ? false : inputsEmpty;
        });
        let str = table1.querySelector('.stroka-2');
        if (!inputsEmpty) {
          str.style.display = '';
        } else {
          str.style.display = 'none'
        }
      }));
      
let inputs2 = table2.querySelectorAll('input');
inputs2.forEach(inp => inp.addEventListener('keyup', function() {
      let inputsEmpty = true;
      inputs2.forEach(function(inp) {
          inputsEmpty = (inp.value.length !== 0) ? false : inputsEmpty;
        });
        let str = table2.querySelector('.stroka-2');
        if (!inputsEmpty) {
          str.style.display = '';
        } else {
          str.style.display = 'none'
        }
      }));
    .tabl-stroka {
  display: flex;
  width: 100%;
}

.tabl-1 input {
  width: 20%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Таблица 1
<div id='table1'>
  <div class="tabl-stroka stroka-1">
    <input type="text" class="inputtext"        name="form_text_11" value="" size="0"><br>
    <input type="text" class="inputtext"  name="form_text_12" value="" size="0"><br>
    <input type="text" class="inputtext"  name="form_text_13" value="" size="0"><br>
    <input type="text" class="inputtext"  name="form_text_14" value="" size="0"><br>
  </div>
 
  <div class="tabl-stroka stroka-2" style="display: none;">
    <input type="text" class="inputtext" name="form_text_21" value="" size="0"><br>
    <input type="text" class="inputtext" name="form_text_2" value="" size="0"><br>
    <input type="text" class="inputtext" name="form_text_23" value="" size="0"><br>
    <input type="text" class="inputtext" name="form_text_24" value="" size="0"><br>
  </div>
</div>

Таблица2
<div id='table2'>
  <div class="tabl-stroka stroka-1">
    <input type="text" class="inputtext"        name="form_text_11" value="" size="0"><br>
    <input type="text" class="inputtext"  name="form_text_12" value="" size="0"><br>
    <input type="text" class="inputtext"  name="form_text_13" value="" size="0"><br>
    <input type="text" class="inputtext"  name="form_text_14" value="" size="0"><br>
  </div>
 
  <div class="tabl-stroka stroka-2" style="display: none;">
    <input type="text" class="inputtext" name="form_text_21" value="" size="0"><br>
    <input type="text" class="inputtext" name="form_text_2" value="" size="0"><br>
    <input type="text" class="inputtext" name="form_text_23" value="" size="0"><br>
    <input type="text" class="inputtext" name="form_text_24" value="" size="0"><br>
  </div>
</div>

    • 0

相关问题