jquery下一步/上一步箭头(简单)

Question

下面是html：

<div class="dl-top">
                <img class="arrow-left" src="img/arrow_left.png" alt="" />
                    <div class="dl-image visible dl-1">
                        <img class="" src="img/dl-image1.jpg" alt="" />
                        <p class="headline">Comebackers: Pitchers who need strong springs</p>
                    </div>
                    <div class="dl-image hidden dl-2">
                        <img class="dl-2" src="img/dl-image2.jpg" alt="" />
                        <p class="headline">TEST #2: Lets see how this one works</p>
                    </div>
                    <div class="dl-image hidden dl-3">
                        <img class="dl-3" src="img/dl-image3.jpg" alt="" />
                        <p class="headline">TEST #3: Sports are fun, yay!!</p>
                    </div>
                <img class="arrow-right" src="img/arrow_right.png" alt="" />    
                </div>  

我只想要一个小的jquery，这样当你点击img.arrow-left时，它会使下一个div可见(dl-2=可见，dl-1，dl-2=隐藏)，并用img.arrow-right隐藏其余部分，反之亦然。

合乎道理?

EDIT:这是一次尝试，但它只是将所有div .dl-image设置为不显示；http://jsfiddle.net/xtian/jk4xR/

Answer 1

尝试：

$(".arrow-left, .arrow-right").click(function() {
    var next_visible = $(this).hasClass(".arrow-left") ? 
            $(".dl-image:visible").prev(".dl-image") : 
            $(".dl-image:visible").next(".d1-image");
    $(".dl-image").hide();
    next_visible.show();
});

​

我还没有尝试过这个特定的代码，但这是完成它的一种方法的一般流程。

Answer 2

试试这个(这段代码不使用dl-1、dl-2等)：

$(function(){
        $(".arrow-left, .arrow-right").click(function(){
            var tgtDiv = null;
            if($(this).hasClass("arrow-left")){
                tgtDiv = $(".dl-image:visible").prev(".dl-image");
            }
            else{
                tgtDiv = $(".dl-image:visible").next(".dl-image");
            }
            var allDivs = $(".dl-image");
            if(tgtDiv.length>0){
                allDivs.hide()
                tgtDiv.show();
            }
        });
});