1

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

好的，这是左侧的 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() 来做到这一点，但我想知道是否可以就如何做到这一点获得一些帮助。谢谢！

4

4 回答 4

4

像这样的东西？

标记

<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();
    });
});

演示

带一点幻灯片效果

$(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
        });

    });
});

演示幻灯片效果

演示淡入淡出效果

于 2013-07-10T02:00:13.900 回答
1

好吧，您首先必须检测左侧元素的点击。在回调函数中，您必须找出点击的 div 的索引，然后找出show()右侧索引与数字匹配的那个。

假设您在一个带有类的容器内有左侧 div，left而右侧则在里面right：

$('.left').on('click', 'div', function(){ //bind the click event to the left divs
    $('.right div')                       // select all the divs inside .right
        .hide()                           // hide all the divs
        .eq( $(this).index() )            // select the one that matches the clicked index
        .show();                          // show it
});

这是一个演示。

这是on().

这是eq().

于 2013-07-10T02:09:42.803 回答
1

Assuming you'll put a left class on those left divs:

var $blocks = $('.block'),
    $left = $('.left');

$('.left').click(function () {
    $blocks.hide().eq( $left.index(this) ).show();
});

Here's the fiddle: http://jsfiddle.net/YddrP/

于 2013-07-10T01:57:13.013 回答
0

是的，您可以尝试 .index() 和 :eq() .index() 返回元素的数字索引，而 :eq() 通过数字索引返回元素。

假设左 div 位于具有“left”类的外部 div 内，而右 div 位于“right”内

$('.left div').click(function () {
    $('.right div').hide();
    var i = $('.left div').index(this);
    $('.right div:eq(' + i + ')').show()
});
于 2013-07-10T02:08:02.090 回答