如何使用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>

Answer 2

您可以将css属性设置为none。

$('.for-input').css('display', 'none');