0

1 つのページに 2 つの別々のギャラリーを配置するのに問題があります。画面が読み込まれると、1 つのギャラリーが正常に表示されます (最初の画像、親指、左右の矢印)。ただし、2 番目のギャラリーには左右の矢印のみが表示されます。(最初のギャラリーまたは 2 番目のギャラリーから) 矢印のいずれかをクリックすると、画像はクリアされますが、親指と矢印はまだそこにあります。矢印をクリックすると、ローダーの gif 画像で動かなくなり、画像が表示されないことがあります。jQuery Exposure Plugin demo 4 を使用しています。ここで何が間違っていますか?

<div id="main"><div id="exposure"></div><div class="clear"></div></div>
<div class="panel">
<div id="left"><a href="javascript:void(0);" onclick="$.exposure.prevImage();return true;"><img src="Exposure/left.png" alt="Previous" /></a></div>
    <ul id="images">
        <li><a href="photo1.jpg"><img src="photo1.jpg" /></a></li>
        <li><a href="photo2.jpg"><img src="photo2.jpg" /></a></li>
          </ul>
          <div id="right"><a href="javascript:void(0);" onclick="$.exposure.nextImage();return true;"><img src="right.png" alt="Next" /></a></div>
        </div>

<div id="main"><div id="exposure"></div><div class="clear"></div></div>
<div class="panel">
<div id="left"><a href="javascript:void(0);" onclick="$.exposure.prevImage();return true;"><img src="Exposure/left.png" alt="Previous" /></a></div>
    <ul id="images">
        <li><a href="photo3.jpg"><img src="photo3.jpg" /></a></li>
        <li><a href="photo4.jpg"><img src="photo4.jpg" /></a></li>
          </ul>
          <div id="right"><a href="javascript:void(0);" onclick="$.exposure.nextImage();return true;"><img src="right.png" alt="Next" /></a></div>
        </div>

jQuery:

<script type="text/javascript">
    $(function(){
        $('#images').exposure({target : '#exposure'});
        $('#images2').exposure({target : '#exposure2'});
});

4

1 に答える 1

0

最初に重複するid属性を修正してください。各id属性はページ内で一意である必要があります。id属性が重複すると、あらゆる種類の奇妙で紛らわしい動作が発生する可能性があります。

あなたの場合、2 つの<div id="exposure">要素がありますが、2 番目のギャラリーは次を探しています<div id="exposure2">。

$('#images2').exposure({target : '#exposure2'});

2 番目のギャラリーは、最初のギャラリーが存在しないものにバインドしようとしています。

$('#images').exposure({target : '#exposure'});

<div>は、同じ を持つ2 つの異なる に自分自身をバインドしようとしていidます。

于 2011-02-23T05:48:40.173 に答える