-3

さまざまな非表示/表示を含むフォームを作成しようとしていますが、このフォームに対して行う必要がある最後の部分の 1 つは、クレジット カードのみが選択されているときに支払い情報フィールドを表示することです。

ここにテストページのセットアップがあります：http://www.faa.net.au/test/femmes-member-form.html

これまでのプロセスは次のとおりです。

  1. 詳細を入力してください
  2. イベント日を選択
  3. メンバーを選択 + 1 人以上のゲストが支払いの詳細を尋ねる
  4. 現時点では、ラジオの選択に応じて表示したい 3 つの DIV を表示していますが、これらを非表示にすると、現在配置されているコードが機能しません。

誰でもここで私を助けてもらえますか？

コードが必要な場合はお知らせください。さまざまな要素が含まれているため、ここにすべてを貼り付けたくありません。ソース コードをご覧いただけますか?

これが私が現在持っているJavascriptですが、これが間違っているのか、それとも何か他のものと衝突しているのかわかりませんか?

        <script type="text/javascript">
        $(function() {
            $('.cat_dropdown').change(function() {
                $('#payMethod').toggle($(this).val() >= 2);
            });
        });     
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".payOptions").click(function () {
                $(".paymentinfo").hide();
                switch ($(this).val()) {
                    case "Credit Card Authorisation":
                        $("#pay0").show("slow");
                        break;
                    case "Direct Deposit":
                        $("#pay1").show("slow");
                        break;
                    case "Cash Payment (FAA Office)":
                        $("#pay2").show("slow");
                        break;
                }
            });
        });
    </script>
4

5 に答える 5

1

View Source からコードを表示し、イベント ハンドラーに正しいクラスを追加していないと推測しています。したがって、ラジオのクリックイベントは呼び出されません。

変化する

$(".payOptions").click(function () {

に

$(".paymentmethod").click(function () {
于 2013-07-19T07:10:21.040 に答える
0

As per my understanding, you're trying like below,

  1. select value from dropdown, if the value !== "1" then show payment radio buttons
  2. Based on the radio button selection, you want to show the respective div

From viewing your source code, it seems you're using jQuery lib and there use this

$(document).ready(function() {
    $('input[type=dropdown]').on('change', function(){
        if($(this).val() !== 1)
            {
                $('input[type=radio]').show();
            }
    }

    $('input[type=radio]').on('change', function(){
        if($(this).val() === "Credit Card Authorisation") {
            $('#pay1').hide();
            $('#pay2').hide();
            $('#pay0').show();
        }
        else if($(this).val() === "Direct Deposit"){
            $('#pay0').hide();
            $('#pay2').hide();
            $('#pay1').show();
        }
        else if($(this).val() === "Cash Payment (FAA Office)"){
            $('#pay0').hide();
            $('#pay1').hide();
            $('#pay2').show();
        }   
    });
});

Hope you understand.

于 2013-07-19T07:30:38.143 に答える
0

このようにjqueryに使用されます

CSS

#pay0, #pay1, #pay2{display:none;}

Jクエリ

$(document).ready(function(){

    $('#payment').change(function(){
        if($('#CAT_Custom_255277_0').attr('checked')){
            $('#pay0').show();
            $('#pay1').hide();
            $('#pay2').hide();
        }
        else if($('#CAT_Custom_255277_1').attr('checked')){
            $('#pay1').show();
            $('#pay0').hide();
            $('#pay2').hide();
        }
        else if($('#CAT_Custom_255277_2').attr('checked')){
            $('#pay2').show();
            $('#pay0').hide();
            $('#pay1').hide();
        }
    });

});

デモ

于 2013-07-19T07:20:32.497 に答える
0

ソースを投稿していませんが、jQuery を使用している場合は、次のように簡単に実行できます。

$(".commonclass").hide();

3 つの div すべてに「commonclass」クラスがある場合。

于 2013-07-19T07:09:39.053 に答える
0

プロセスは次のようになります。

  • きれいに始めましょう: すべての支払い方法を非表示にします
  • ラジオ入力にはpaymentmethodクラスがあるため、変更イベントリスナーをそれらの要素にアタッチします
  • ラジオのいずれかが選択されたら、すべての支払い方法を非表示にし、 を使用して表示する方法を決定し、indexその div を表示します
$('#pay0, #pay1, #pay2').hide();

$('input.paymentmethod').on('change', function(){
  $('#pay0, #pay1, #pay2').hide();
  var selected = $('input.paymentmethod').index($('input.paymentmethod:checked'));
  $('#pay'+selected).show();
});
于 2013-07-19T07:12:46.763 に答える