Question

我做错了什么？我试图在点击缩略图时显示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>

Answer 1

尝试在.index()方法中包含选择器：

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

Answer 2

我认为index()正在做你打算做的事情。

我会使用dataImageId属性或类似的东西来唯一识别图像。

Answer 3

您的索引是2，如下所示：

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

索引是基于0的。

请注意，第一个返回0，因为它是第一个div，第二个返回2，因为它是第三个div，所以你需要用.clickImage类隔离到div

这是一个简单的小提示：http://jsfiddle.net/zfZE2/

Answer 4

您的第一个可点击的clickImage将有效，因为它会返回index:0.

哪个是正确的相应弹出窗口。

但对于第二个clickImage，它将返回index：2，它没有相应的弹出窗口。只有0和1。

这是因为.textVertical也被视为clickImage的兄弟，因此你clikc的第二个clickImage将是第三个兄弟（索引）。

更改

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

要

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

http://jsfiddle.net/rNSLE/

Answer 5

尝试这种方式：

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

单击显示和隐藏div

5 个答案: