如何使用javascript隐藏基于输入值的元素

How to hide element based on input value with javascript?

本文关键字：输入 元素 javascript 何使用 隐藏 于输入      更新时间：2023-09-26

我试图隐藏/显示输入和基于输入值的div。

下面的代码不起作用：

HTML:

<div>
     <span class='just-show'>Show This Label</span>
     <input class='for-input' type='text' value='*$set-by-sql-data*'>
</div>

JS-

$(document).ready(function () {
    if ($(".for-input").val()=='') {
        $(".just-show").show();
        $(".for-input").hide();
    } else {
        $(".just-show").hide();
        $(".for-input").show();
    }
    return false;
});

如何隐藏没有事件的元素（例如：点击）？功能刚刚就绪。

您可以使用

$(document).on('change', 'input', function() {
  // Does some stuff and logs the event to the console
});

或

$("input").change(function(){
    // Does some stuff and logs the event to the console
});

其中input是与.for-input 类似的输入标识符

您的愿望Jquery代码：

$(document).on('change', '.for-input', function() {
    if ($(".for-input").val()=='') {
        $(".just-show").show();
        $(".for-input").hide();
    } else {
        $(".just-show").hide();
        $(".for-input").show();
    }
});

示例：

$(document).ready(function () {
    if ($(".for-input").val()=='') {
        $(".just-show").show();
        $(".for-input").hide();
    } else {
        $(".just-show").hide();
        $(".for-input").show();
    }
    //return false;
  
  $(document).on('change', '.for-input', function() {
     if ($(".for-input").val()=='') {
        $(".just-show").show();
        $(".for-input").hide();
    } else {
        $(".just-show").hide();
        $(".for-input").show();
    }
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
     <span class='just-show'>Show This Label</span>
     <input class='for-input' type='text' value='*$set-by-sql-data*'>
</div>

您可以将css属性设置为不显示。

$('.for-input').css('display', 'none');
相关文章：