javascript - 如何使用javascript根据输入值隐藏元素？

Question

我正在尝试根据输入值隐藏/显示输入和 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;
});

如何在没有事件(例如:单击)的情况下隐藏元素？刚刚就绪的功能。

Answer 1

您可以使用

$(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>