Question

是否可以在一个html doc上使用外部js文件和jquery两次？我有第一个正在运行，但第二次调用它不起作用。在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);
                }
            });
        });

Answer 1

不要使用相同的ID创建多个DOM对象。 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');

两次调用外部js

1 个答案: