Question

检查其他线程我觉得我的代码应该可行，但我必须遗漏一些东西。我试图隐藏/显示基于输入值的div;当输入为1时，将有一个div;当它的2，第二个div将显示; if 3，third div等... Here is my page。

在页面上，如果您选择个人选项，则会显示两个新的div。基本上只有第一个请选择您的用餐 div将出现，当用户将输入更改为2时，将出现第二个。如果用户返回1，则第二个div应该隐藏。

jQuery(function($) {
   //create div to wrap individual meal options
    $('.product-addon-please-choose-your-meal').before('<div id="individual-meals"></div>');

    //add meal choices to div
    $('.product-addon-please-choose-your-meal').appendTo('#individual-meals');
    $('.product-addon-please-choose-your-meal-2').appendTo('#individual-meals');

    //hide 2nd option if input is 2
    if ($('input[type="number"]').val() == 2) {
        $('.product-addon-please-choose-your-meal-2').hide();
    }

    //show meal options depending on user choice
    $('form').on('change', '#purchase', function(){
        // Reset required fields and hide fields
        $('select, input').prop('required', false);
        $('#table-meals, #individual-meals').hide();

        if($(this).val()=="Individual") {
            $('#individual-meals').show();
            $("#table-meals").not("#individual-meals").hide();
            $('input').prop('required',true);
            $('#table-meals select').val("Select an Option...");
        }

        if($(this).val()=="Table of 10") {
            $('input[type="number"]').val("10").prop('readonly', true);
            $("#individual-meals").not("#table-meals").hide();
            $('#table-meals').show();
            $('select').prop('required',true);
            //$('input[type="radio"]').prop('checked', false);
            $('input[type="radio"].addon.addon-radio').prop('checked', false);
        }
    });
});

Answer 1

您的页面产生以下错误：

Uncaught TypeError: $ is not a function
(anonymous function) @ index:3

很可能根本没有加载jQuery，或者在加载代码之前执行代码。

jQuery根据输入值隐藏div

1 个答案: