单击显示和隐藏div

Question

What am I doing wrong? I am trying to show divs when the thumbnail is clicked. I am able to show the first div, but for some reason, the next div is not showing. I cannot figure out what I might be missing.

<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>

Answer 1

Try including a selector in the .index() method:

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

Answer 2

I don't think index() is doing what you are intending for it to do.

I would use a dataImageId attribute or something similar to uniquely identify the images.

Answer 3

your index is 2 as selected, use something like this:

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

index is 0 based.

Note that the first returns 0 as it is the first div, and 2 on the second as it is the third div, so you need to isolate to the divs with the .clickImage class

Here is a simple fiddle to demonstrate: http://jsfiddle.net/zfZE2/

Answer 4

Your first clickable clickImage will work because it will return index:0.

Which is the right corresponding popup.

But for the second clickImage it will return index:2, which does not have a corresponding popup. Only 0 and 1 are present.

This is because .textVertical is also seen as a sibling of clickImage , thus the 2nd clickImage you clikc will be the 3rd sibling (index).

Change

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

To

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

http://jsfiddle.net/rNSLE/

Answer 5

Try this way:

<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>