Tengo dos entradas con clases (q1, q2) y un div con clase (salida). Me gustaría poder ocultar el div cuando una o todas las entradas tienen "cualquier valor". Soy nuevo en javascript.
$(document).ready(function() { $('.q1, .q2').keyup(function() { if ($(this).val().length == 0) { $('.output').show(); } else { $('.output').hide(); } }).keyup(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="output">Test</div> <input type="text" value="" class="q1"> <input type="text" value="" class="q2">Debe verificar ambos valores de input para lograr su objetivo de esta manera:
$(document).ready(function() { $('.q1, .q2').keyup(function() { var q1 = $('.q1').val(); var q2 = $('.q2').val(); if (q1.length || q2.length) { $('.output').hide(); } else { $('.output').show(); } }).keyup(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="output">Test</div> <input type="text" value="" class="q1"> <input type="text" value="" class="q2">Haseeb ha dado una gran respuesta.
Solo quería mencionar que, como es nuevo en JQuery / Javascript, a menudo vale la pena verificar la existencia de clases antes de usarlas, ya que evita que los cambios en el HTML más adelante causen problemas inesperados.
$(document).ready(function() { // Check if the classes exist here if ($(".q1")[0] && $(".q2")[0] ) { $('.q1, .q2').keyup(function() { var q1 = $('.q1').val(); var q2 = $('.q2').val(); if (q1.length || q2.length) { $('.output').hide(); } else { $('.output').show(); } }).keyup(); } });