Question

我有一个包含三个不同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>

谢谢

Answer 1

我假设您正在使用此textResizer plugin。如果您要定位不同大小的页面的不同部分，那么您确实应该使用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;}

Jquery只处理第一个函数/代码块

1 个答案: