Блог

У меня есть страница с тремя разными фрагментами кода jquery, все они выполняют разные действия. Проблема в том, что когда все они находятся на странице, работает только первый. Я изменил порядок, и независимо от фрагмента работает только первый. Есть ли внутренний конфликт jquery, который я пропускаю?

Мой код:

 <script type="text/javascript"> 

jQuery(document).ready( function() {

    $("#main-menu li").mouseenter(function() {  
        $(this).find("ul").fadeIn();
    }).mouseleave(function(){
      $(this).parent().find("ul").fadeOut();
    });

    jQuery( ".text-resize a" ).textresizer({
         target: ".content",
         type: "fontSize",
         sizes: [ "12px", "16px" ],
         selectedIndex: 0
    });
    jQuery( ".text-resize a" ).textresizer({
         target: ".title",
         type: "fontSize",
         sizes: [ "11px", "16px" ],
         selectedIndex: 0
    });
    jQuery( ".text-resize a" ).textresizer({
         target: ".show-more",
         type: "fontSize",
         sizes: [ "12px", "16px" ],
         selectedIndex: 0
    });
    jQuery( ".text-resize a" ).textresizer({
         target: "#footer",
         type: "fontSize",
         sizes: [ "12px", "16px" ],
         selectedIndex: 0
    }); 
    jQuery( ".text-resize a" ).textresizer({
         target: ".copyright",
         type: "fontSize",
         sizes: [ "11px", "16px" ],
         selectedIndex: 0
    }); 

        $(".slidetabs").tabs(".images > div", {

        // enable "cross-fading" effect
        effect: 'fade',
        fadeOutSpeed: "2000",
        // start from the beginning after the last tab   
        rotate: true          
    // use the slideshow plugin. It accepts its own configuration
    }).slideshow( {autoplay: true, interval:3000});

});     
</script> 
  

Спасибо

Я предполагаю, что вы используете этот плагин textResizer. Вам действительно следует использовать type="cssClass" , если вы собираетесь использовать разные разделы страницы разных размеров.

 jQuery( ".text-resize a" ).textresizer({
     target: "body",
     type: "cssClass",
     sizes: [ "size1", "size2" ],
     selectedIndex: 0
});
  

Ваш CSS будет выглядеть примерно так

 body.size1 .content { font-size: 12px;}
body.size2 .content { font-size: 16px;}

body.size1 .title { font-size: 11px;}
body.size2 .title { font-size: 16px;}

body.size1 .show-more { font-size: 12px;}
body.size2 .show-more { font-size: 16px;}

body.size1 #footer { font-size: 12px;}
body.size2 #footer { font-size: 16px;}

body.size1 .copyright { font-size: 11px;}
body.size2 .copyright { font-size: 16px;}
  

Было бы лучше объединить CSS для тех, которые одинаковы

 body.size1 .title,
body.size1 .copyright { font-size: 11px;}

body.size1 .content,
body.size1 #footer,
body.size1 .show-more { font-size: 12px;}

body.size2 .content,
body.size2 .title,
body.size2 .show-more,
body.size2 #footer,
body.size2 .copyright { font-size: 16px;}