-3

我正在尝试创建一个包含各种隐藏/显示的表单，我需要对此表单执行的最后一部分是在仅选择信用卡时显示付款信息字段。

我在这里有一个测试页面设置：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 Souce 查看代码并猜测您没有在事件处理程序中添加正确的类。因此没有调用收音机的点击事件。

改变

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

至

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

Process goes something like this:

  • Start clean: hide all payment methods
  • Your radio inputs have paymentmethod class, so attach a change event listener to those elements
  • When one of the radios is selected, hide all of the payment methods, determine the one you want to show using index, and show that 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 回答
0

曾经像这样使用jquery

CSS

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

jQuery

$(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

据我了解，您正在尝试如下，

  1. 从中选择值dropdown，如果value !== "1"然后显示付款单选按钮
  2. 根据radio按钮选择，您希望显示相应的 div

从查看您的源代码来看，您似乎正在使用jQuerylib 并使用它

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

希望你能理解。

于 2013-07-19T07:30:38.143 回答
0

您还没有发布任何源代码，但如果您使用的是 jQuery，您可以简单地执行以下操作：

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

前提是所有 3 个 div 都有“commonclass”类。

于 2013-07-19T07:09:39.053 回答