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，这意味着它将在页面加载时立即执行，并且仅执行一次。

为了解决这个问题，您需要将此代码放在事件处理程序中 -

​$(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 回答