Question

当用户从单选按钮进行选择时，我想在同一<div>中显示不同的消息。它有效，但它并不像我想的那么干净。这是代码：

<script type="text/javascript">
    function showhide(t) {
        var target = document.getElementById('bankingdetails');
        if (target.style.display == 'none') {
            var text = 'Please effect payment to the following account:<br />';
            var accountnum = 'Account Number: 39485620346<br />';
            var branchcode = 'Branch Code: 34985<br />';
            var branchname = 'Branch: F00 Bank Whoville';
            if (t == 0) {
                // User opted for Online Payment
                target.style.display = 'block';
                target.innerHTML = 'Please click here to go to PayPal:<br /><a href="http://www.paypal.com">Go to PayPal</a>';
            } else {
                target.style.display = 'block';
                target.innerHTML = text + accountnum + branchcode + branchname;
            };
        } else {
            target.style.display = 'none';
        };
    };
</script>

<input type="radio" name="radPayment" onclick="showhide(0);" />Pay Online
<input type="radio" name="radPayment" onclick="showhide(1);" />EFT

现在，我可以点击任一单选按钮显示它的消息，但是......我必须再次点击它，或者点击另一个来隐藏可见消息。

我想要的是更改页面上显示的文字，这样如果可以看到电子转帐文字，如果我点击付费在线按钮，文字会立即更改。

提前致谢！

Answer 1

如果我理解正确，多次单击会导致div隐藏/显示。您可以通过始终检查给定参数t来解决此问题：

<script type="text/javascript">
    function showhide(t) {
        var target = document.getElementById('bankingdetails');

        var text = 'Please effect payment to the following account:<br />';
        var accountnum = 'Account Number: 39485620346<br />';
        var branchcode = 'Branch Code: 34985<br />';
        var branchname = 'Branch: F00 Bank Whoville';
        switch(t)
        {
            case 0:
                // User opted for Online Payment
                target.style.display = 'block';
                target.innerHTML = 'Please click here to go to PayPal:<br /><a href="http://www.paypal.com">Go to PayPal</a>';
                break;
            case 1:
                target.style.display = 'block';
                target.innerHTML = text + accountnum + branchcode + branchname;
                break;
            default:
                 target.style.display = 'none';
        }
    };
</script>

Javascript显示动态内容

1 个答案: