2013-01-03 104 views
0

是否可以在一个html文档中使用外部js文件和jQuery两次?我有第一个运行,但第二次调用它不起作用。此外,外部js在Internet Explorer中打开时不起作用。调用外部js两次

<!DOCTYPE html > 
<html> 
<head> 

<link href="css/stylesheetelaine.css" rel="stylesheet" type="text/css"/> 




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> 

<script type="text/javascript" src="js/script2.js"> </script> 

<script src="js/jQuery/jquery.monte.js"></script>  



<meta charset="utf-8"> 
<title>Gallery</title> 


</head> 

<body> 

<div id="wrapper"> 

<div id="title"> 

<h1><a href="index.html"><img src="img/elaine4.png" width="517" height="185" alt="elaine cullinan"></a><img src="img/elainefilligree.png" width="235" height="251" alt="elaine"></h1> 


<div id="nav"> 
<ul id> 

<li><a href="about.html" title="About">About</a></li> 
<li><a href="tattoo.html" title="Tattoo">Tattoo</a></li> 
<li><a href="makeup.html" title="Make Up">Make Up</a></li> 
<li><a href="gallery.html" title="Gallery">Gallery</a></li> 
<li><a href="contact.html" title="Contact">Contact</a></li> 

</ul> 
</div> 
</div> 

<div id="gallback"> 

<h2> Tattoos </h2> 

<div id="gallerywrap"> 

    <div id='example1' class='container'> 
     <img src="img/tattoogallery/outlineariel.jpg" alt='Zombie Ariel.'/> 

     <img src="img/tattoogallery/horsecar.jpg" alt='Elaine tattooing'/> 

     <img src="img/tattoogallery/2small.jpg" alt='Two Small Tattoos'/> 

     <img src="img/tattoogallery/clown.jpg" alt='Clown'/> 

     <img src="img/tattoogallery/lightsabers.jpg" alt='Finger Lightsabers'/> 

     <img src="img/tattoogallery/flouder.jpg" alt='Flounder'/> 

     <img src="img/tattoogallery/grenade.jpg" alt='Grenade'/> 

     <img src="img/tattoogallery/colourcherryblossom.jpg" alt='Colour Cherry Blossom'/> 
    <img src="img/tattoogallery/13.jpg" alt='13'/> 

    <img src="img/tattoogallery/mechwing.jpg" alt='Mechanical Wing'/> 

    <img src="img/tattoogallery/qotsa.jpg" alt='QOTSA'/> 

    <img src="img/tattoogallery/horsecartatt.jpg" alt='Carousel'/> 

    <img src="img/tattoogallery/lovefinger.jpg" alt='Love finger tatt'/> 

    <img src="img/tattoogallery/hakun.jpg" alt='Hakuna Matata'/> 

    <img src="img/tattoogallery/romannum.jpg" alt='Roman Numerals'/> 

    <img src="img/tattoogallery/slayer.jpg" alt='Slayer'/> 

    <img src="img/tattoogallery/shamrock.jpg" alt='Shamrock'/> 

    <img src="img/tattoogallery/scriptarm.jpg" alt='Script'/> 

    <img src="img/tattoogallery/skull.jpg" alt='Skull'/> 

    <img src="img/tattoogallery/wristfoot.jpg" alt='Wrist and Foot Tatts'/> 

    <img src="img/tattoogallery/zombieariel.jpg" alt='Zombie Ariel'/> 

    <img src="img/tattoogallery/script.jpg" alt='Script'/> 

    <img src="img/tattoogallery/chinese.jpg" alt='Chinese Symbols'/> 

    <img src="img/tattoogallery/colflower.jpg" alt='Flower'/> 

    <img src="img/tattoogallery/scriptfoot.jpg" alt='Foot Script Tatt'/> 

    <img src="img/tattoogallery/Triton.jpg" alt='Triton'/> 

    <img src="img/tattoogallery/zombiefingers.jpg" alt='Zombie Finger Tatt'/> 

    <img src="img/tattoogallery/tyler.jpg" alt='Script'/> 

    <img src="img/tattoogallery/3ursula.jpg" alt='Ursula'/> 

    <img src="img/tattoogallery/locket.jpg" alt='Locket'/> 

    <img src="img/tattoogallery/mechwing2.jpg" alt='Mechanical Wings'/> 

    <img src="img/tattoogallery/backscript.jpg" alt='Script'/> 

    <img src="img/tattoogallery/wingcolor.jpg" alt='Coloured Wing'/> 


    </div> 

</div> 


</div> 


<div id="gallback"> 

<h2> Make Up </h2> 

<div id="gallerywrap"> 

    <div id='example1' class='container'> 
     <img src="img/tattoogallery/outlineariel.jpg" alt='Zombie Ariel.'/> 

     <img src="img/tattoogallery/horsecar.jpg" alt='Elaine tattooing'/> 

     <img src="img/tattoogallery/2small.jpg" alt='Two Small Tattoos'/> 

     <img src="img/tattoogallery/clown.jpg" alt='Clown'/> 

     <img src="img/tattoogallery/lightsabers.jpg" alt='Finger Lightsabers'/> 

     <img src="img/tattoogallery/flouder.jpg" alt='Flounder'/> 

     <img src="img/tattoogallery/grenade.jpg" alt='Grenade'/> 

     <img src="img/tattoogallery/colourcherryblossom.jpg" alt='Colour Cherry Blossom'/> 



    </div> 

</div> 


</div> 



</div> 
</body> 

</html> 

外部:

 $(function() { 
      // Unstyled Example 
      $.monte('#example1'); 


      // Styled Buttons Example 
      // (see the CSS in the above style block) 
      $.monte('#example2', {auto:false}); 


      // Callback Example 
      // Format and append the HTML: 
      $('#example3 > img').each(function(){ 
       $(this) 
       .wrap('<div style="position:relative"/>') 
       .parent() 
       .append('<div><p>' + $(this).attr('alt') + '</p></div>') 
       .append('<img src="frame.png" alt="" class="frame"/>'); 
      }); 
      // Hide the text on all but the center slide: 
      $('#example3 div div').css({opacity: 0}).eq(0).css({opacity: 0.8}); 
      // Using the callbacks to reveal and hide the text: 
      $.monte('#example3', { 
       auto:false, 
       callbackIn: function() { 
        $(this[0]).find('div').animate({opacity: 0.8}, 450); 
       }, 
       callbackAway: function() { 
        $(this[0]).find('div').animate({opacity: 0}, 450); 
       } 
      }); 
     }); 
+1

叫我疯了,但我只能看到3个JS文件,每个包含1次。如果你的问题是你是否可以包含多个外部JS文件,那么答案是肯定的。非常非常。除了现在的大部分页面,一天都没有机会。你确定你的文件已上传吗? – h2ooooooo

+0

你想从JavaScript运行的东西? JavaScript在哪里执行?我可能会错过一些东西。 – kevingreen

+0

请发布一些JavaScript,我不明白你想要多次调用什么。我看到了包含,但没有明确地将JavaScript转化为行动的任何地方。它们是否在外部文件中被调用?请提供一些代码/上下文,谢谢。 – kevingreen

回答

0

不要让多个DOM具有相同ID的对象。 ID应该是唯一的标识符。当您多次使用相同的ID时,最有可能只处理具有相同ID的第一个对象。

重命名该ID并用新ID调用它。

<!DOCTYPE html > 
<html> 
<head> 

<link href="css/stylesheetelaine.css" rel="stylesheet" type="text/css"/> 




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> 

<script type="text/javascript" src="js/script2.js"> </script> 

<script src="js/jQuery/jquery.monte.js"></script>  



<meta charset="utf-8"> 
<title>Gallery</title> 


</head> 

<body> 

<div id="wrapper"> 

<div id="title"> 

<h1><a href="index.html"><img src="img/elaine4.png" width="517" height="185" alt="elaine cullinan"></a><img src="img/elainefilligree.png" width="235" height="251" alt="elaine"></h1> 


<div id="nav"> 
<ul id> 

<li><a href="about.html" title="About">About</a></li> 
<li><a href="tattoo.html" title="Tattoo">Tattoo</a></li> 
<li><a href="makeup.html" title="Make Up">Make Up</a></li> 
<li><a href="gallery.html" title="Gallery">Gallery</a></li> 
<li><a href="contact.html" title="Contact">Contact</a></li> 

</ul> 
</div> 
</div> 

<div id="gallback"> 

<h2> Tattoos </h2> 

<div id="gallerywrap"> 

    <div id='example1' class='container'> 
     <img src="img/tattoogallery/outlineariel.jpg" alt='Zombie Ariel.'/> 

     <img src="img/tattoogallery/horsecar.jpg" alt='Elaine tattooing'/> 

     <img src="img/tattoogallery/2small.jpg" alt='Two Small Tattoos'/> 

     <img src="img/tattoogallery/clown.jpg" alt='Clown'/> 

     <img src="img/tattoogallery/lightsabers.jpg" alt='Finger Lightsabers'/> 

     <img src="img/tattoogallery/flouder.jpg" alt='Flounder'/> 

     <img src="img/tattoogallery/grenade.jpg" alt='Grenade'/> 

     <img src="img/tattoogallery/colourcherryblossom.jpg" alt='Colour Cherry Blossom'/> 
    <img src="img/tattoogallery/13.jpg" alt='13'/> 

    <img src="img/tattoogallery/mechwing.jpg" alt='Mechanical Wing'/> 

    <img src="img/tattoogallery/qotsa.jpg" alt='QOTSA'/> 

    <img src="img/tattoogallery/horsecartatt.jpg" alt='Carousel'/> 

    <img src="img/tattoogallery/lovefinger.jpg" alt='Love finger tatt'/> 

    <img src="img/tattoogallery/hakun.jpg" alt='Hakuna Matata'/> 

    <img src="img/tattoogallery/romannum.jpg" alt='Roman Numerals'/> 

    <img src="img/tattoogallery/slayer.jpg" alt='Slayer'/> 

    <img src="img/tattoogallery/shamrock.jpg" alt='Shamrock'/> 

    <img src="img/tattoogallery/scriptarm.jpg" alt='Script'/> 

    <img src="img/tattoogallery/skull.jpg" alt='Skull'/> 

    <img src="img/tattoogallery/wristfoot.jpg" alt='Wrist and Foot Tatts'/> 

    <img src="img/tattoogallery/zombieariel.jpg" alt='Zombie Ariel'/> 

    <img src="img/tattoogallery/script.jpg" alt='Script'/> 

    <img src="img/tattoogallery/chinese.jpg" alt='Chinese Symbols'/> 

    <img src="img/tattoogallery/colflower.jpg" alt='Flower'/> 

    <img src="img/tattoogallery/scriptfoot.jpg" alt='Foot Script Tatt'/> 

    <img src="img/tattoogallery/Triton.jpg" alt='Triton'/> 

    <img src="img/tattoogallery/zombiefingers.jpg" alt='Zombie Finger Tatt'/> 

    <img src="img/tattoogallery/tyler.jpg" alt='Script'/> 

    <img src="img/tattoogallery/3ursula.jpg" alt='Ursula'/> 

    <img src="img/tattoogallery/locket.jpg" alt='Locket'/> 

    <img src="img/tattoogallery/mechwing2.jpg" alt='Mechanical Wings'/> 

    <img src="img/tattoogallery/backscript.jpg" alt='Script'/> 

    <img src="img/tattoogallery/wingcolor.jpg" alt='Coloured Wing'/> 


    </div> 

</div> 


</div> 


<div id="gallback"> 

<h2> Make Up </h2> 

<div id="gallerywrap2"> 

    <div id='example2' class='container'> 
     <img src="img/tattoogallery/outlineariel.jpg" alt='Zombie Ariel.'/> 

     <img src="img/tattoogallery/horsecar.jpg" alt='Elaine tattooing'/> 

     <img src="img/tattoogallery/2small.jpg" alt='Two Small Tattoos'/> 

     <img src="img/tattoogallery/clown.jpg" alt='Clown'/> 

     <img src="img/tattoogallery/lightsabers.jpg" alt='Finger Lightsabers'/> 

     <img src="img/tattoogallery/flouder.jpg" alt='Flounder'/> 

     <img src="img/tattoogallery/grenade.jpg" alt='Grenade'/> 

     <img src="img/tattoogallery/colourcherryblossom.jpg" alt='Colour Cherry Blossom'/> 



    </div> 

</div> 


</div> 



</div> 
</body> 

</html> 

在化妆部分下,我将它改名为gallerwrap2下的Gallery2。对于无标题的例子,你应该打电话给$.monte('#example2');

+0

谢谢,它的工作原理!有些搞砸了布局,但应该很容易分类。但是,有没有理由在IE中不工作? – user1944305

+0

您使用的是哪个版本的IE?你有任何脚本错误? – kevingreen

+0

对不起!金发时刻!我只记得我之前修复过它,我没有关闭div,它在其他浏览器中工作,但不是IE。再次感谢 – user1944305