入力値が空であるかどうかをチェックする変更テキスト

Question

以下のコードは、入力がhiddenである各入力の値に基づいて、アクティブyesと呼ばれるdivのテキストを変更するためのコードです。 idが "Enable List"に設定されている場合に、このdivのテキストを変更したいのですが、classname deleteで入力した値が "Deleted list"に変更され、両方がnullの場合は "list" 私のコードが正しく動作しません。 私の問題は何ですか？ここ は私の抜粋です：

$(document).ready(function() { 
 
    tmpval = $('#enable').val(); 
 
    if (tmpval == '') { 
 
    $('.activeyes').text('list'); 
 
    } else { 
 
    $('.activeyes').text('Enable List'); 
 
    } 
 
     
 
    tmpval2 = $('#delete').val(); 
 
    if (tmpval2 == '') { 
 
    $('.activeyes').text('List'); 
 
    } else { 
 
\t $('.activeyes').text('Deleted List'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<input type="text" value="aa" id="enable" /> 
 
<input type="text" value="" id="delete" /> 
 
<h1 class="activeyes"> List</h1>

Answer 1

あなたは第2チェックで最初のチェックの効果が上書きされます。 2つの入力値を一緒にチェックする必要があります。それでも、両方が空でなければ何が起こるかは不明です。

$(document).ready(function() { 
 
    tmpval = $('#enable').val(); 
 
    tmpval2 = $('#delete').val(); 
 
    if (tmpval == '' && tmpval2 == '') { 
 
    $('.activeyes').text('list'); 
 
    } else if(tmpval!=''){ 
 
    $('.activeyes').text('Enable List'); 
 
    } else if(tmpval2!=''){ 
 
    $('.activeyes').text('Deleted List'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<input type="text" value="aa" id="enable" /> 
 
<input type="text" value="" id="delete" /> 
 
<h1 class="activeyes"> List</h1>

Answer 2

私の問題は何か？

値が変更された場合、inputの値を確認する必要がありますので、changeイベントをキャプチャしてください。

$(document).ready(function() { 
 

 
    $('#enable, #delete').change(function() { 
 
    var $this = $(this); 
 
    var id = $this.attr("id"); 
 
    var value = $this.val(); 
 
    if (value.length == 0) 
 
    { 
 
     $('.activeyes').text('list'); 
 
    } 
 
    else 
 
    { 
 
     id == "enable" ? $('.activeyes').text('Enable List') : $('.activeyes').text('Deleted List'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<input type="text" value="aa" id="enable" /> 
 
<input type="text" value="" id="delete" /> 
 
<h1 class="activeyes"> List</h1>