Magento 需要帮助将jQuery移植到noConflict模式吗

我已经读了一些关于jQuery noConflict模式的书，但仍在为之挣扎。 我有一些代码可以在noConflict模式下正常工作，但无法实现以下功能：

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

$.fn.infiniteCarousel=函数（）{
函数重复（str，num）{
返回新数组（num+1）.join（str）；
}
返回此。每个（函数（）{
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），//注意：不包括填充或边框
currentPage=1，
pages=Math.ceil（$items.length/visible）；
//1.填充以使“可见”编号始终可见，否则创建空项目
如果（（$items.length%可见）！=0）{
$slider.append（重复（“
”，可见-（$items.length%visible））；
$items=$slider.find（'>li'）；
}
//2.顶部和尾部带有“可见”项目数的列表，顶部为最后一部分，尾部为第一部分
$items.filter（':first'）.before（$items.slice（-visible.clone（）.addClass（'cloned'））；
$items.filter（':last'）.after（$items.slice（0，可见）.clone（）.addClass（'cloned'））；
$items=$slider.find（'>li'）；//重新选择
//3.将左侧位置设置为第一个“真实”项
$wrapper.scrollLeft（单宽*可见）；
//4.寻呼功能
函数gotoPage（第页）{
var dir=页面<当前页面？-1:1，
n=数学绝对值（当前页-第页），
左=单宽*dir*可见*n；
$wrapper.filter（':not（：animated'）。设置动画({
向左滚动：'+='+向左
}，500，函数（）{
如果（第==0页）{
$wrapper.scrollLeft（单幅*可见*页面）；
页面=页面；
}else if（页面>页面）{
$wrapper.scrollLeft（单宽*可见）；
//重置回起始位置
page=1；
} 
当前页面=第页；
});                
返回false；
}
$wrapper.after（“”）；
//5.绑定到前进和后退按钮
$（'a.back'，this）。单击（函数（）{
返回gotoPage（当前页-1）；
});
$（'a.forward'，this）。单击（函数（）{
返回gotoPage（当前页面+1）；
});
//创建公共界面以移动到特定页面
$（this）.bind（'goto'，函数（事件，页面）{
gotoPage（第页）；
});
});  
};
$（文档）.ready（函数（）{
$（'.InfiniteCaruel'）.InfiniteCaruel（）；
})

我是否将所有的“$”替换为“jQuery”？即使在返回this.each（function（）{…，等等）时，我所做的只是将noConflict行添加到jQuery库的末尾以启用它。（我正在运行Magento，因此它与prototype等有冲突。）

提前谢谢

---

Tre

你可以这样做，但会很混乱

您需要将选择器前面的

$

替换为

jQuery

。因为您有以

$

开头的变量，所以会有一些非常疯狂的变量名，比如

jqueryrapper

——我会仔细阅读这些代码，将选择器更改为jQuery，并从变量中取出

$

我完全不相信

例如：

var wrapper = jQuery('> div', this).css('overflow', 'hidden'),

---

你可以这样做，但会很混乱

您需要将选择器前面的

$

替换为

jQuery

。因为您有以

$

开头的变量，所以会有一些非常疯狂的变量名，比如

jqueryrapper

——我会仔细阅读这些代码，将选择器更改为jQuery，并从变量中取出

$

我完全不相信

例如：

var wrapper = jQuery('> div', this).css('overflow', 'hidden'),

---

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

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

---

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

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

试试这个

(function($){
 $.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);
        });
    });  
};
})(jQuery);

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

是jQuery.noConflict（）的替代品；

试试这个

(function($){
 $.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);
        });
    });  
};
})(jQuery);

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

---

是jQuery.noConflict（）的替代品；

@Regiel如果要用

jQuery（）

大量查找/替换

$（）

，假设这就是他用于noConflict（）的内容；？如果我错了，请告诉我：）OP问，

我是否要将所有的“$”替换为“jQuery”？

。你应该说不……变量名和它一样好……一个解决方案就是用

（函数（$）{所有代码都在这里}）（jQuery）来包装所有内容

；）现在您可以安全地在内部使用变量。。我同意所有的观点。@bstakes的解决方案要多得多elegant@Regiel它是指如果要用

jQuery（）

大量查找/替换

$（）

，假设这就是他用于noConflict（）的内容；如果我弄错了，请告诉我：）OP问，

我是否要用'jQuery'替换所有的'$'呢？

。你应该说不……变量名和它一样好……一个解决方案是用

（函数（$）{所有代码都在这里}来包装一切（jQuery）

；）现在您可以安全地在内部使用

$

变量了。我同意所有的观点。@bstakes的解决方案更加优雅。所以，如果我这样设置代码，那么我就不需要jQuery.noConflict（）？如果我同时做了这两件事，它会引起问题，不是吗？如果你同时做了这两件事，它不会引起问题，因为jQuery.noConflict放弃了对全局$或更多描述的控制