4

私は何が間違っているのですか？サムネイルをクリックしたときにdivを表示しようとしています。最初のdivを表示できますが、何らかの理由で次のdivが表示されません。何が欠けているのか理解できません。

<script>
$(function(){
    $('.clickImage').click(function(){
        $('.popUp').hide();
        $('.popUp').eq($(this).index()).show();
    });
});
</script>

<style>
.popUp{
    display:none;
}
</style>

<div id="projectContainer">
        <div class="imageV clickImage"></div>
        <div class="textVertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel tortor sit amet magna condimentum dapibus non quis nulla. Etiam varius pellentesque quam sed faucibus. Ut libero mi, porta ac tincidunt sagittis, porttitor a elit. In non tellus eu mauris tristique gravida. In rutrum arcu ullamcorper risus consequat interdum. Sed rutrum rhoncus dolor. Suspendisse potenti.</div>

        <div class="imageV clickImage"></div>
        <div class="textVertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel tortor sit amet magna condimentum dapibus non quis nulla. Etiam varius pellentesque quam sed faucibus. Ut libero mi, porta ac tincidunt sagittis, porttitor a elit. In non tellus eu mauris tristique gravida. In rutrum arcu ullamcorper risus consequat interdum. Sed rutrum rhoncus dolor. Suspendisse potenti.</div>
</div>
<div>
    <div class="popUp">Enlarged Image 1</div>
    <div class="popUp">Enlarged Image 2</div>
</div>
4

5 に答える 5

5

.index()メソッドにセレクターを含めてみてください。

$(function(){
    $('.clickImage').click(function(){
        $('.popUp').hide();
        $('.popUp').eq($(this).index(".clickImage")).show();
    });
});
于 2013-02-12T15:29:34.413 に答える
0

この方法を試してください： 

<script>
$(function(){
    $('.clickImage').click(function(){
        $('.popUp').hide();
    $(this).next().next().show();
    });
});
</script>

<style>
.popUp{
    display:none;
}
</style>

<div id="projectContainer">
        <div class="imageV clickImage"></div>
        <div class="textVertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel tortor sit amet magna condimentum dapibus non quis nulla. Etiam varius pellentesque quam sed faucibus. Ut libero mi, porta ac tincidunt sagittis, porttitor a elit. In non tellus eu mauris tristique gravida. In rutrum arcu ullamcorper risus consequat interdum. Sed rutrum rhoncus dolor. Suspendisse potenti.</div>
    <div class="popUp">Enlarged Image 1</div>

        <div class="imageV clickImage"></div>
        <div class="textVertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel tortor sit amet magna condimentum dapibus non quis nulla. Etiam varius pellentesque quam sed faucibus. Ut libero mi, porta ac tincidunt sagittis, porttitor a elit. In non tellus eu mauris tristique gravida. In rutrum arcu ullamcorper risus consequat interdum. Sed rutrum rhoncus dolor. Suspendisse potenti.</div>
    <div class="popUp">Enlarged Image 2</div>
</div>
于 2013-02-12T15:33:10.547 に答える
0

私はindex()あなたがそれがすることを意図していることをしているとは思わない。

dataImageId画像を一意に識別するために、属性などを使用します。

于 2013-02-12T15:26:50.500 に答える
0

インデックスが2に選択されている場合は、次のように使用します。

$('.clickImage').click(function () {
       var i=$('.clickImage').index(this);
       $('.popUp').hide();
       $('.popUp').eq(i).show();
});

インデックスは0ベースです。

最初のdivは最初のdivであるため0を返し、2番目のdivは3番目のdivであるため2を返すため、.clickImageクラスを使用してdivに分離する必要があることに注意してください。

これがデモンストレーションする簡単なフィドルです：http：//jsfiddle.net/zfZE2/

于 2013-02-12T15:29:33.963 に答える
0

最初のクリック可能ファイルclickImageは戻るので機能しますindex:0.

これは正しい対応するポップアップです。

ただし、2番目のclickImage場合は、対応するポップアップがないindex：2を返します。0と1のみが存在します。

これは.textVertical、の兄弟としても表示されるためですclickImage。したがって、クリックした2番目のclickImageが3番目の兄弟（インデックス）になります。

変化する

  $('.popUp').eq($(this).index()).show();

に

  $('.popUp').eq($(this).index('.clickImage')).show();

http://jsfiddle.net/rNSLE/

于 2013-02-12T15:31:42.157 に答える