点击描述显示div时出现Uncaught TypeError: $ is not a function错误求助

Hey there, let's break down why you're hitting that error and how to fix it quickly!

The Root Cause #

You’ve called jQuery.noConflict() at the start of your script. This method tells jQuery to relinquish control of the $ variable—so any subsequent use of $ won’t reference jQuery anymore, hence the "$ is not a function" error right at your $(function(){ line.

Simple Fixes #

You have a few straightforward options to resolve this, all of which will get your description toggle working as intended:

Option 1: Replace all $ with jQuery

Since jQuery is still the valid reference to the library, swap out every $ in your code:

jQuery.noConflict();
jQuery(function(){
    //clear value when clicked
    jQuery('.clearme').one("focus", function() {
        jQuery(this).val("");
    });

    //fancybox for infoLinks
    jQuery("a.hole-link").fancybox({
        'width' :900,
        'height' :800,
        'type': 'iframe',
        'fitToView' : false,
        'autoSize' : false,
        'autoDimensions' : false
    });

    jQuery(".desc-link").click(function () {
        if ( jQuery(".desc-div").hasClass('open') ) {
            jQuery(".desc-div").removeClass('open').animate({
                'width' : '1000',
                'height' : '1000'
            }, 1000);
            jQuery(".desc-inner-div").css("display","none");
        } else {
            jQuery(".desc-div").addClass('desc-div-open').animate({
                'width' : '100%',
                'height' : '100%'
            }, 1000, function() {
                jQuery(".desc-inner-div").css("display","block");
            });
            jQuery(".desc-link").css("display","none");
        }
    });

    jQuery(".close-link").click(function () {
        jQuery(".desc-div").animate({
            'width' : '0px',
            'height' : '0px'
        }, 1000, function() {
            jQuery(".desc-div").removeClass('desc-div-open');
            jQuery(".desc-link").css("display","inline");
        });
        jQuery(".desc-inner-div").css("display","none");
    });
});

Option 2: Use a self-invoking function to alias jQuery as $

This keeps your code clean by letting you still use $ inside the function scope:

jQuery.noConflict();
(function($) {
    $(function(){
        // Your existing code here works exactly as before with $
        $('.clearme').one("focus", function() {
            $(this).val("");
        });

        $("a.hole-link").fancybox({
            'width' :900,
            'height' :800,
            'type': 'iframe',
            'fitToView' : false,
            'autoSize' : false,
            'autoDimensions' : false
        });

        $(".desc-link").click(function () {
            if ( $(".desc-div").hasClass('open') ) {
                $(".desc-div").removeClass('open').animate({
                    'width' : '1000',
                    'height' : '1000'
                }, 1000);
                $(".desc-inner-div").css("display","none");
            } else {
                $(".desc-div").addClass('desc-div-open').animate({
                    'width' : '100%',
                    'height' : '100%'
                }, 1000, function() {
                    $(".desc-inner-div").css("display","block");
                });
                $(".desc-link").css("display","none");
            }
        });

        $(".close-link").click(function () {
            $(".desc-div").animate({
                'width' : '0px',
                'height' : '0px'
            }, 1000, function() {
                $(".desc-div").removeClass('desc-div-open');
                $(".desc-link").css("display","inline");
            });
            $(".desc-inner-div").css("display","none");
        });
    });
})(jQuery);

Option 3: Use jQuery's DOM ready callback with $ as a parameter

This is the most concise approach—jQuery passes itself as the argument to the ready callback, so you can safely name it $:

jQuery.noConflict();
jQuery(function($){
    // All your code here uses $ safely
    $('.clearme').one("focus", function() {
        $(this).val("");
    });

    $("a.hole-link").fancybox({
        'width' :900,
        'height' :800,
        'type': 'iframe',
        'fitToView' : false,
        'autoSize' : false,
        'autoDimensions' : false
    });

    $(".desc-link").click(function () {
        if ( $(".desc-div").hasClass('open') ) {
            $(".desc-div").removeClass('open').animate({
                'width' : '1000',
                'height' : '1000'
            }, 1000);
            $(".desc-inner-div").css("display","none");
        } else {
            $(".desc-div").addClass('desc-div-open').animate({
                'width' : '100%',
                'height' : '100%'
            }, 1000, function() {
                $(".desc-inner-div").css("display","block");
            });
            $(".desc-link").css("display","none");
        }
    });

    $(".close-link").click(function () {
        $(".desc-div").animate({
            'width' : '0px',
            'height' : '0px'
        }, 1000, function() {
            $(".desc-div").removeClass('desc-div-open');
            $(".desc-link").css("display","inline");
        });
        $(".desc-inner-div").css("display","none");
    });
});

Pick whichever option fits your coding style best—all of them will resolve the error and get your desc-inner-div displaying correctly when the description is clicked!

内容的提问来源于stack exchange，提问作者user2189801