Question

我是jQuery的新手。我需要#reviews divs（#rev1，#rev2，#rev3）点击#arrowr逐个“滑动”。此代码有效，但点击#Arrowr @ #Rev3后，它不会更改为#rev1。你能指点我解决这个问题的方法。当我点击#arrowr时，如何让div一个接一个地改变？并创建循环？请！抱歉我的英语很差。

<div id="reviewsc">
    <div id="reviews">
        <div id="rev1" class="revv">rev1</div>
        <div id="rev2" class="rev">rev2</div>
        <div id="rev3" class="rev">rev3</div>
    </div>
    <div id="arrowr">></div>
</div>
<style>
    .rev {
        margin-left: -9999px or opacity:0 or display:none;
    }
    ;
    .revv {
        margin-left: 0px or opacity:1 or display:block;
    }
    ;
</style>

$('div#arrowr').click(function () {
    $('#rev1').removeClass('revv').addClass('rev').next().removeClass('rev').addClass('revv');
    if ($('#rev2').hasClass('revv')) {
        $('div#arrowr').click(function () {
            $('#rev2').removeClass('revv').addClass('rev').next().removeClass('rev').addClass('revv');
        });
    }
    if ($('#rev3').hasClass('revv')) {
        $('div#arrowr').click(function () {
            $('#rev3').removeClass('revv').addClass('rev');
            $(this) // How i can go Back to my #REV1 Div? And start the cycle again
        });
    }
    return false;
});

Answer 1

因为其他人默认是隐藏的：

var ctr = 1;
var max = $('#reviews').children().length;

$('div#arrowr').click(function () {
    $('#rev'+ctr).removeClass('revv').addClass('rev');
    ctr++;
    if(ctr > max){ //ctr = max+1 => reset ctr
        ctr = 1;
    }    
     $('#rev'+ctr).removeClass('rev').addClass('revv');
});

为另一个方向：

$('div#arrowl').click(function () {
    $('#rev'+ctr).removeClass('revv').addClass('rev');
    ctr--;
    if(ctr == 0){ //ctr = 0 => reset ctr
        ctr = max;
    }    
     $('#rev'+ctr).removeClass('rev').addClass('revv');
});

这是一个小提琴：http://jsfiddle.net/phgXu/2/

如何通过单击导航箭头从右到左（或其他）制作“滑块”

1 个答案: