0

JavaScriptで特定の条件でボタンの表示・非表示をしたい。

コード：

$(function(){
    // hide the div initially
    $("#a").hide();

    // Check to see if there is 250 in the url
    var bal_amount = document.getElementById('balance_amount');
    if (bal_amount.value > 0) {
        $("#a").show();
    }
});

HTML

<form>
<input type="text" id="balance_amount">
</form>

<image src="image.jpg" id="a">

しかし、うまくいきません。

4

2 に答える 2

1

コードのこの部分を変更する必要があります-

// Check to see if there is 250 in the url
var bal_amount = document.getElementById('balance_amount');
if (bal_amount.value > 0)
{
    $("#a").show();
}

上記のコードをdocument readyイベント内で実行しています。つまり、ページが読み込まれたときに1回だけ実行されます。

これを修正するには、このコードをイベントハンドラー内に配置する必要があります-

​$(document).ready(function () {
    $("#a").hide();

    // See this? This is the event handler for the
    // change event which will fire whenever the value
    // of the text box changes.
    $('#balance_amount').change(function () {
        // Check to see if there is 250 in the url
        if ($(this).val() > 0) {
            $("#a").show();
        }
    });
});​

このように、balance_amountフィールドの値が変更されるたびに、このイベントがトリガーされ、の残高が検証されます。

ここでは、実用的なデモを見つけることができます。

テキストボックスに無効な入力がないかチェックすることで、コードをさらに改善できます-

​$(document).ready(function () {
    $("#a").hide();

    // See this? This is the event handler for the
    // change event which will fire whenever the value
    // of the text box changes.
    $('#balance_amount').change(function () {

        var balance = parseInt($(this).val(), 10);
        if (isNaN(balance)) {
            alert('You have entered an invalid value');
            return false;
        }

        if (balance > 0){
            $("#a").show();
        }

        // There you go, an else block for you
        else {
            $("#a").hide();
        }
    });
});​
于 2012-12-06T08:00:28.457 に答える
0

これを試して：

$(document).ready(function(){
        $("#a").hide();
   $('#balance_amount').keyup(function () {
        // Check to see if there is 250 in the url
        var bal_amount = $('#balance_amount').val();
        if (bal_amount.value > 0) {
            $("#a").show();
        }
    }
});
于 2012-12-06T07:59:48.863 に答える