Javascript显示动态内容

我想在用户从单选按钮进行选择时在相同的<div>中显示不同的消息。它可以工作，但并不像我想的那么干净。下面的代码：Javascript显示动态内容

<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

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

我想要更改显示在页面上的文本，以便如果EFT文本可见，如果我点击Pay Online按钮，文本将立即更改。

在此先感谢！

来源

2011-10-06 Ortund

不知道什么是理想的逻辑..你能更好地解释你期望发生什么吗？ –

是的，你想在一段时间后隐藏自己的信息吗？你的目标是什么？ – Mateo

如果我理解正确，点击多次会导致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>

来源

2011-10-06 14:00:01 Candide

Javascript显示动态内容

回答

相关问题