Question

在过去的观察日里，我一直在把这个问题砸到墙上。我有一个页面，你可以考虑一个产品查找器：在这里看到它： http://media-surfer.nl/test/

我想将此页面包含在我运行的mangeto商店中： http://ongedierteproducten.nl/bieb

我知道Magento使用原型和scriptaculous所以我使用了jQuery.noConflict（）; 虽然这启用了拇指的功能，但排序菜单仍无法正常工作。

如果有人能给我一个指针，我会越过月球。

亲切的问候，杰森。

magento页面中的jQuery：

<!-- collapse expand jquery -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){

        jQuery(".inhoud").hide();
        jQuery(".show_hide").show();

    jQuery(document).on('click','.show_hide', function(event) { 

        jQuery(".inhoud").parent().animate({
            width: '160'
          }, 500, function() {
            // Animation complete.
          });


        var $inhoud = jQuery(this).next(".inhoud");

        if($inhoud.hasClass("active")) 
        {
            jQuery(this).parent().animate({
                width: '160'
              }, 500, function() {
                // Animation complete.
              });
            $inhoud.removeClass("active");
            jQuery("div.inhoud").hide();
        } else {
            jQuery(this).parent().animate({
                width: '769'
              }, 500, function() {
                // Animation complete.
              });

            $inhoud.addClass("active");
            jQuery(this).next("div.inhoud").show();
        }

    });

});

<!-- filter plugin -->
<script charset="utf-8" type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function() {
        var _filterPortfolio = jQuery('#portfolio').filterPortfolio({
            initFilter: '#all', 
            itemUL: '#itemUL',
            filterButtons: [ 
                {'link': '#all', 'dom': 'li'}, 
                {'link': '#kruipt', 'dom': 'li.kruipt'}, 
                {'link': '#vliegt', 'dom': 'li.vliegt'}, 
                {'link': '#staart', 'dom': 'li.staart'} 
            ], 

            orderReverse: true,
            sortOption: {
                adjustHeight: 'auto',
                easeIn: 'fadeIn',
                easeOut: 'fadeOut'
            }
        });         

        jQuery("select#easeInType").change(selChange);  
        jQuery("select#easeOutType").change(selChange);             
        function selChange(){
            var _easeIn = jQuery('select#easeInType').val();
            var _easeOut = jQuery('select#easeOutType').val();              
            _filterPortfolio.updateAnimation(_easeIn, _easeOut);
            jQuery('#selections').hide();
        }

        jQuery('#toggleImg').on('click', function(event){
            jQuery('#selections').toggle();
        })                      


    });

Answer 1

您可以将jQuery代码分别包装在anonymous function中，如下所示：

<script type="text/javascript">
;(function($){
    // all jQuery code:
    $(document).ready(function(){
    // your code
    });
})(jQuery);

您应该将所有js代码放在.js文件中，而不是将它们内联，如果可能的话。

jQuery脚本的一半有效，其他则没有

1 个答案: