问：

jQuery.noConflict();对此代码的作用是什么？

我的想法如何解决它：

必须用propper $替换jQuery，但我对jQuery不太了解，并且不知道哪个$必须被替换。如果是，我应该在代码中替换$ ？

示例：

// Start
        $.mglass = function(element, options) {

替换为

// Start
        jQuery.mglass = function(element, options) {

感谢您的回答，更正和代码。

JS：

这个JS做了什么，它在图像悬停上显示放大镜

来源：https://github.com/younes0/jQuery-MGlass

jquery library code here ...

jQuery.noConflict();

(function($) {

    // Start
    $.mglass = function(element, options) {

        // Defaults
        var defaults = {
            opacity: 0.4,
            speed: 150,
            wrapper: true
        };

        var plugin = this, $element = $(element);

        plugin.settings = {};


        // Constructor
        plugin.init = function() {

            plugin.settings = $.extend({}, defaults, options);

            if (plugin.settings.wrapper) {
                $element.wrap('<div class="mglassWrapper" />');
            }

            var 
                h = $element.height(), 
                w = $element.width(),
                b = $element.css('border-top-width')
            ;

            var overlayStyle = 'width: '+w+'px; height: '+h+'px;'; 

            // if original image has border (border-top as reference), set width as margin
            if (b) {
                overlayStyle+= 'margin: '+b+';';
            }

            // CSS3 transition Support ?
            if (typeof $.css3Transitions === 'undefined') {
                $.css3Transitions = plugin.supportsTransitions();
            }
            if ($.css3Transitions) {
                overlayStyle+= $.fn.mglass.transitionProperty+': opacity '+(plugin.settings.speed/1000)+'s ease;';
            }

            // Mglass Div
            $overlay = $('<div class="mglass" style="'+overlayStyle+'"></div>');
            $overlay.insertBefore($(element));

            // No CSS3 transition support : javascript fallback
            if ( ! $.css3Transitions) {
                $overlay.hover(
                    function () {
                        $(this).stop().animate({"opacity": plugin.settings.opacity}, plugin.settings.speed);
                    },
                    function () {
                        $(this).stop().animate({"opacity": 0}, 100);
                    }
                );
            }


        },

        plugin.supportsTransitions = function() {

            var el      = document.createElement('div');
            var vendors = ['', 'Ms', 'Moz', 'Webkit', 'O'];

            for (var i = 0, len = vendors.length; i < len; i++) {
                var prop = vendors[i] + 'Transition';
                if (prop in el.style) {
                    $.fn.mglass.transitionProperty = '-'+vendors[i].toLowerCase()+'-transition';
                    return true;
                }
            }

            return false;

        };


        // Init
        plugin.init();

    };

    // Add the plugin to the jQuery.fn object
    $.fn.mglass = function(options) {
        return this.each(function() {
            if (undefined === $(this).data('mglass')) {
                var plugin = new $.mglass(this, options);
                $(this).data('mglass', plugin);
            }
        });
    };

// End
})(jQuery);

然后在HTML中我将此内容发布在页面内容的末尾

<script>
   jQuery("img").mglass({
       opacity: 0.5
    });
</script>

Answer 1

实际上，看起来该插件“正在运行”，尽管它可能无法获得您想要的结果。

请参阅底部的代码 fiddle （页面上的Moo工具可提供$之间的冲突）。我为$ .mglass作用的元素添加了一个简单的淡入淡出，并在页面上的图像上调用了插件。插件创建的fadeto触发器和.mglass包装器div正被添加到DOM中。

关于为什么这不起作用的初步想法是CSS，您是否已将mglass css添加到您的网页？

Answer 2

解决方案位于已修改的代码中，我在代码前面添加了(function($) { }，以便$可以运行，并且不会跨越其他库

Answer 3

如果有的话，如果你这样做，则不需要重写：

(function ($) {
    // your old code here
}(jQuery.noConflict()));

jQuery重写jQuery.noConflict（）;

问：

我的想法如何解决它：

JS：

3 个答案: