javascript - jQuery 使用 index()

Question

我很难解释我想要什么，但我会试一试。

好的，这是左侧的 html。

<div></div>
<div></div>
<div></div>
<div></div>

这是右侧输出的内容。

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div> 

我试图做到这一点，当你点击左边的第一个 div 时，右边的第一个 div 出现，当你点击左边的第二个 div 时，右边的第二个 div 出现，而​​所有其他 div在右边再次隐藏等等。我知道您可以使用 jQuery 中的 .index() 来完成此操作，但我想知道是否可以就如何操作获得一些帮助。谢谢!

Answer 1

是这样的吗？

标记

<div class="left">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<div class="right">
    <div class="block">Result 1</div>
    <div class="block">Result 2</div>
    <div class="block">Result 3</div>
    <div class="block">Result 4</div>
</div>

JS

$(function(){
   $('.left > div').on('click', function(){
        //Just show the respective block div based on the clicked index and hide its siblings that are visible.
        $('.block').eq($(this).index()).show().siblings('.block:visible').hide();
    });
});

Demo

加上一点幻灯片效果

$(function () {
    $('.block').eq(0).show();
    $('.left > div').on('click', function () {
        var elemToShow = $('.block').eq($(this).index()); //Get the element to show
        $('.block:visible').stop().slideUp(1000, function () { // slide up the visible block div
            elemToShow.stop().slideDown(1000); // once the animation finishes shidedown the element to show
        });

    });
});

Demo Slide effect

Demo Fade effect