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 开始的。

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

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

于 2013-02-12T15:29:33.963 回答
0

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

这是正确的相应弹出窗口。

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

这是因为.textVertical也被视为 的同级clickImage，因此您单击的第二个 clickImage 将是第三个同级（索引）。

改变

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

至

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

http://jsfiddle.net/rNSLE/

于 2013-02-12T15:31:42.157 回答