javascriptで入力値に基づいて要素を非表示にする方法は？

Question

入力値に基づいてinputとdivを表示/非表示しようとしています。

以下のコードが動作していません。

HTML：（：クリックEX）イベントなしで要素を非表示にするには、どのように

<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のような入力識別子である

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

あなた

.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プロパティを設定することができます。

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