0

ページの再設計に取り組んでおり、6 つのラジオ ボックスと 1 つのボタンの代わりに、ユーザーが選択できる 6 つのオプションに 6 つの異なるボタンを追加しました。コードを調整して、次のページで、押されたボタンに基づいて正しい合計とテキストが表示されるようにするだけです。

どのボタンが押されたかに応じて、次のページのテキストの一部を変更する必要があります。

もともとあったものは次のとおりです。

<input id="diamondmonthly" class="radio" type="radio" value="diamondmonthly" name="membership">

<input id="diamondyearly" class="radio" type="radio" checked="checked" value="diamondyearly" name="membership">

<input id="c4" class="radio" type="radio" value="c4" name="membership">

<input id="c3" class="radio" type="radio" value="c3" name="membership">

<input id="c2" class="radio" type="radio" value="c2" name="membership">

<input id="c1" class="radio" type="radio" value="c1" name="membership">

<a id="btnSave" class="xlarge button-submit" onclick="$j('#btnSave').attr('disabled', 'disabled');qc.recordControlModification('btnSave', 'Enabled', '0'); qc.pB('MembershipForm', 'btnSave', 'QClickEvent', '');" href="#">

<script>
//<![CDATA[
qc.registerForm(); qc.imageAssets = "http://images.comfiles.com/assets/images"; qc.cssAssets = "http://images.comfiles.com/assets/css"; qc.phpAssets = "/assets/php"; qc.jsAssets = "http://images.comfiles.com/assets/js"; qc.regCA(new Array("btnSave","btnSave2","c1","c2","c3","c4","diamondyearly","diamondmonthly")); jQuery(document).ready(function($j){if($j.isFunction($j().tooltip)){$j("#MembershipForm :input[data-error]").tooltip({ position: "center right", tipClass: "error_tooltip", offset: [0, -4] })}}); 
//]]>
</script>
4

1 に答える 1

0

これは、ボタンごとにリスナーを使用するか、作業を単一の祖先要素に委任することで処理できます。この場合、シングル クリック リスナーをフォームに配置するのがおそらく最も簡単です。呼び出されると、関連付けられたイベント オブジェクトを使用して、それがどこから来たのかを確認し、それに応じて対応することができます。

フォーム コントロールを名前で取得する場合、その名前を持つコントロールが 1 つだけの場合は、1 つの要素だけが返されることに注意してください。2 つ以上のコントロールに名前がある場合、その名前を持つ要素の HTMLCollection が返されます。

リスナーは次のようになります。

<form onclick="handleClick(this)" ...>

そしてリスナー（テストされていませんが、ここから始めることができるはずです）：

function handleClick(form) {
  var button, buttons = form['membership'];

  // Now show text depending on which membership button is checked
  for (var i=0, iLen=buttons.length, i<iLen; i++) {
      button = buttons[i];

      // Assuming that the text element to display has an ID 
      // matching the value of the checked button
      if (button.checked) {
        document.getElementById(button.value).style.display = '';
      } else {
        document.getElementById(button.value).style.display = 'none';
      }
  }
}

スクリプトは、フォーム内のどこかをクリックするたびに実行されるため、リセット ボタンがクリックされた場合でも、正しいテキストが常に表示されます。

if..else は次のように置き換えることができます。

      document.getElementById(button.value).style.display = button.checked? '' : 'none';

しかし、長いバージョンの方が明確かもしれません。

ああ、script 要素の CDATA 区切り文字を削除してください。これらは、XML として提供されるドキュメントにのみ必要です。

于 2012-05-07T23:56:43.437 に答える