需要帮助将jQuery移植到noConflict模式 [英] Need help porting jQuery to noConflict mode

问题描述

我已经阅读了一些有关jQuery noConflict模式的文章，但仍在为之苦苦挣扎. 我有一些代码可以在noConflict模式下正常运行，但是无法遵循以下要求:

I've done some reading about jQuery noConflict mode, and am still struggling with it a bit. I've got some code to function properly in noConflict mode, but have been unable to get the following to follow suit:

$.fn.infiniteCarousel = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }

    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),

            singleWidth = $single.outerWidth(), 
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            


        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect

        // 3. Set the left position to the first 'real' item
        $wrapper.scrollLeft(singleWidth * visible);

        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;

            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 

                currentPage = page;
            });                

            return false;
        }

        $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');

        // 5. Bind to the forward and back buttons
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);                
        });

        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });

        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};

$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();
})

我是否仅将所有'$'替换为'jQuery'?即使在返回this.each(function(){...等?带有原型等)

Do I just replace all the '$' with 'jQuery'? Even in the return this.each(function() { ..., etc? All I have done is added the noConflict line to the end of my jQuery library in order to enable it. (I'm running Magento so it has conflicts with prototype, etc.)

提前谢谢！

Tre

推荐答案

一个更简单的解决方案可能是将所有内容包装在立即调用的匿名函数中，然后将jQuery对象传递给$参数，如下所示:

An even easier solution might be to wrap everything in an immediately invoked anonymous function, and pass in the jQuery object to a $ argument like this:

jQuery.noConflict()
(function($) {
    //now I can use $ locally
})(jQuery)

这篇关于需要帮助将jQuery移植到noConflict模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！