2013-08-27 30 views
0

当我在同一页面上包含这两个文件时,代码似乎不起作用。什么导致冲突?我似乎无法弄清楚。我是新来的js,仍然在学习,所以任何帮助表示赞赏。谢谢!Javascript代码冲突

文件1:

$(document).ready(function(){ 

    var items = $('#stage li'), 
     itemsByTags = {}; 

    // Looping though all the li items: 

    items.each(function(i){ 
     var elem = $(this), 
      tags = elem.data('tags').split(','); 

     // Adding a data-id attribute. Required by the Quicksand plugin: 
     elem.attr('data-id',i); 

     $.each(tags,function(key,value){ 

      // Removing extra whitespace: 
      value = $.trim(value); 

      if(!(value in itemsByTags)){ 
       // Create an empty array to hold this item: 
       itemsByTags[value] = []; 
      } 

      // Each item is added to one array per tag: 
      itemsByTags[value].push(elem); 
     }); 

    }); 

    // Creating the "Everything" option in the menu: 
    createList('All',items); 

    // Looping though the arrays in itemsByTags: 
    $.each(itemsByTags,function(k,v){ 
     createList(k,v); 
    }); 

    $('#filter a').live('click',function(e){ 
     var link = $(this); 

     link.addClass('active').siblings().removeClass('active'); 

     // Using the Quicksand plugin to animate the li items. 
     // It uses data('list') defined by our createList function: 

     $('#stage').quicksand(link.data('list').find('li'), 
           function() { 
           $("a.fsand").fancybox({ 
            'overlayShow' : false, 
            'transitionIn' : 'elastic', 
            'transitionOut' : 'elastic' 
           }); 
           $(".play").click(function() { 
            $.fancybox({ 
              'padding'  : 0, 
              'autoScale'  : false, 
              'transitionIn' : 'none', 
              'transitionOut' : 'none', 
              'title'   : this.title, 
              'width'  : 680, 
              'height'  : 495, 
              'href'   : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
              'type'   : 'swf', 
              'swf'   : { 
               'wmode'  : 'transparent', 
               'allowfullscreen' : 'true' 
              } 
             }); 

            return false; 
           }); 
           }); 
     e.preventDefault(); 
    }); 

    $('#filter a:first').click(); 

    function createList(text,items){ 

     // This is a helper function that takes the 
     // text of a menu button and array of li items 

     // Creating an empty unordered list: 
     var ul = $('<ul>',{'class':'hidden'}); 

     $.each(items,function(){ 
      // Creating a copy of each li item 
      // and adding it to the list: 

      $(this).clone().appendTo(ul); 
     }); 

     ul.appendTo('#gal-container'); 

     // Creating a menu item. The unordered list is added 
     // as a data parameter (available via .data('list'): 

     var a = $('<a>',{ 
      html: text, 
      href:'#', 
      data: {list:ul} 
     }).appendTo('#filter'); 
    } 

    $("a#example1").fancybox({ 
     'overlayShow' : false, 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic' 
    }); 

}); 
//]]> 

文件2:

this.molitorscripts = function() { 

    //FILTER EFFECTS & APPEARANCE 
    var filterLink = jQuery('#filter a'); 
    filterLink.click(function(){ 

     jQuery('li.box').removeClass('hideMe'); 

     filterLink.not(this).removeClass('active'); 
     jQuery(this).addClass('active'); 

     var activeCat = jQuery(this).html().toLowerCase().replace(/ /g,''); 

     jQuery('li.postEvent').not('li.'+ activeCat).addClass('hideMe').children().stop(true,true).animate({opacity:".1"},350); 
     jQuery('li.'+ activeCat).children().stop(true,true).animate({opacity:"1"},350); 

     return false; 
    }); 
    jQuery('#filter li').not(':first').prepend("/ &nbsp;&nbsp;&nbsp;"); 


} 
jQuery.noConflict(); jQuery(document).ready(function(){molitorscripts();}); 
+0

文件2第一行是什么'this'? – collapsar

+0

请澄清“似乎不起作用”。 –

+0

@collapsar它必须是全局对象(请参见在最后一行中调用它)。 – bfavaretto

回答

3

变化的第一个文件的第一行从

$(document).ready(function(){ 

$(document).ready(function($){ 

第二个文件使用jQuery.noConflict(),它将为jQuery对象禁用$别名。由于第一个文件中的所有内容都包装在document.ready处理程序中,所以您可以利用这个处理程序自动传递jQuery对象的事实,您可以在本地调用。