Question

我想隐藏并在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">

但它不起作用。

Answer 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字段的值发生变化，此事件就会触发并验证您的余额金额。

Here你会找到一个有效的演示。

您可以通过在文本框中检查无效输入来进一步改进代码 -

$(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();
        }
    });
});

Answer 2

试试这个：

$(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();
        }
    }
});

在javascript中隐藏/显示条件

2 个答案: