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 = visible，dl-1，dl-2 = hidden）并隐藏其余部分，然后反转，与img.arrow-right。

有道理吗？

编辑：这是一次尝试，但它只是让所有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();
            }
        });
});

jquery下一个/上一个箭头（简单）

2 个答案: