2

div入力が入力されるまで次のボタンを非表示にしようとしているので、次のコードを追加しました。

<script>
    $(document).ready(function () {
        if ($('#myDiv').val().length == 0) {
            $('#next_btn').hide();  
        } else {    
            $('#next_btn').show();      
        }
    });
</script>

これがmyDivです

<textarea id="myDiv"></textarea>

次のボタンを非表示にしてdivいるが、データを入力すると、の入力が#myDiv表示#next_btnされない場合。

私はここで何か間違ったことをしていますか？

4

6 に答える 6

4

入力に変更イベントハンドラーをアタッチします

最初は次の要素を非表示にしているだけです。また、入力値が変更されるたびに再確認する必要があります。代わりにこれを試してください：

$(function(){
    // bind a change event handler
    $('#myDiv').change(function(){
        this.value.length && $('#next_btn').show() || $('#next_btn').hide();
    }).change(); // set initial state
});

ifいずれの場合も単純な1文の処理を行っているため、ステートメントは使用していません。むしろブール式に置き換えました。Javascriptエンジンをブール値で実行すると、jQueryセレクターが1つだけ実行されるため、次のボタン要素をキャッシュする必要もありません。

ifもちろん、そのワンライナーを次のようなものに置き換えることができます。

if (this.value.length)
{
    $('#next_btn').show();
}
else
{
    $('#next_btn').hide();
}

状態を初期化することを忘れないでください

変更イベントを添付することがすべてではありません。ページが読み込まれるとき（または準備ができているとき）にも初期状態を設定する必要があります。私のコードは、の最後の呼び出しでそれを行い.change()ます。これは、最初にハンドラーを登録してから、それを呼び出すことを意味します。

超単純化されたソリューション：toggleブールパラメータで使用

すべてをこれで置き換えることができます：

$(function(){
    // bind a change event handler
    $('#myDiv').change(function(){
        $('#next_btn').toggle(!!this.value.length);
    }).change(); // set initial state
});

変更イベントは大丈夫ですか？

フィールドがフォーカスを失った後に発生するため、変更イベントが要件を満たしているとは限りません。keypress代わりに、またはkeyupイベントを使用する必要があります。しかし、ソリューションはそのままです。イベントハンドラバインディングを置き換えるだけです。

于 2013-01-08T14:11:01.313 に答える
3

#myDivが入力タグだと思いますか？または、div内に入力がありますか？これを試して：

 var textarea = $("#myDiv");
 textarea.change(function(){
      if(this.value.length == 0)
           textarea.hide();
      else
           textarea.show();
 });

入力が変更されたときにifが実行されます。長さが変化するため、変更があるたびにコードを再実行することが重要です。

（実際にはdivではなくtextareaであるため、myDivに適切な名前を付けるのが賢明かもしれません。）

更新して余分なjqueryの選択を削除します

于 2013-01-08T14:08:55.537 に答える
1

これはそれが短い方法でそれを行うことができる方法です。

HTML：

<div id="myDiv">
  <input value="Test" />
</div>
<button id="next_btn">Next</button>

JavaScript：

$(function() {
    $("#myDiv input").on("keyup", function() {
        $("#next_btn").toggle($.trim(this.value).length > 0);
    });
});

デモ：http： //jsfiddle.net/LYtbJ/

于 2013-01-08T14:15:39.037 に答える
1

入力が直接内部myDivにあると仮定すると、あなたがやろうとしていることは次のようなものだと思います。

if ($('#myDiv > input').val().length == 0) {
    $('#next_btn').hide();
} else {
    $('#next_btn').show();
}

divではなく入力の値をチェックしようとしています（私が知る限り、これはとにかく不可能です）。

!$('#myDiv > input').val()または、それをもう少し単純化して、の代わりに実行することもできます$('#myDiv > input').val().length == 0。

于 2013-01-08T14:08:50.623 に答える
1

このコードをonchange関数内に配置しましたか？

$(document).ready(function() {
    $('#myDiv').change(function() {
        if(this.value.length == 0) {
            $('#next_btn').hide();
        } else {
            $('#next_btn').show();
        }
    });
});

これは機能しますか？

于 2013-01-08T14:10:04.453 に答える
1

#myDivDIV（ ）と入力ボタンを混同していると思います。

if( $('#myDiv').find('.my-input-class').val().length == 0 ) {
    $('#next_btn').hide();
} else {
    $('#next_btn').show();
}

ここでは、入力にクラス'my-input-class'があると想定し、find（）を使用してそれを取得します。また、入力ボックスに入力するユーザーをリッスンするイベントがあると仮定します。乾杯。

于 2013-01-08T14:11:14.720 に答える