javascript - jQuery 自定义 slider 无法按预期工作

Question

我正在尝试制作 Bootstrap 面板 slider 。为此，我编写了自己的 jQuery 代码，但未按预期工作。

我正在尝试做的事情:

我有两个链接用于上一个和下一个，我有 3 个面板，标题不同，只是为了区分这三个面板。单击上一个，当前面板应该隐藏，它的前一个面板应该出现。我已经通过 ID 1、2 和 3 对面板进行了索引。如果当前面板是第一个面板，然后单击上一个面板，然后单击最后一个面板，则应该弹出第三个面板。当我们点击下一步按钮时，反之亦然。以下是我正在使用的代码:

HTML:

<div class="panel-slider">
    <div class="panel" id="1">
        <div class="panel-header">News Update 1</div>
        <div class="panel-body">
            <img src="img/news-update.jpg" class="img-responsive" />Lorizzle pizzle ma nizzle dope amizzle, consectetuer crazy elit. Dope dope velizzle, fo shizzle my nizzle volutpizzle, shizzlin dizzle fo shizzle, gravida fo shizzle, arc</div>
    </div>
    <div class="panel hide" id="2">
        <div class="panel-header">News Update 2</div>
        <div class="panel-body">
            <img src="img/news-update.jpg" class="img-responsive" />Lorizzle pizzle ma nizzle dope amizzle, consectetuer crazy elit. Dope dope velizzle, fo shizzle my nizzle volutpizzle, shizzlin dizzle fo shizzle, gravida fo shizzle, arc</div>
    </div>
    <div class="panel hide" id="3">
        <div class="panel-header">News Update 3</div>
        <div class="panel-body">
            <img src="img/news-update.jpg" class="img-responsive" />Lorizzle pizzle ma nizzle dope amizzle, consectetuer crazy elit. Dope dope velizzle, fo shizzle my nizzle volutpizzle, shizzlin dizzle fo shizzle, gravida fo shizzle, arc</div>
    </div>
    <div class="panel-slider-controls"> <a href="#" class="pull-left">Prev</a>
 <a href="#" class="pull-right">Next</a>

    </div>
</div>

JS:

var panel_index = 1;

$(".panel-slider .panel-slider-controls a").click(function () {
    var that = $(this);
    $(".panel[id=" + panel_index + "]").addClass("hide");
    if (that.text() == "Prev") {
        panel_index--;
        if (panel_index > 1) {
            $(".panel[id='" + panel_index + "']").removeClass("hide");
        } else {
            $(".panel[id='3']").removeClass("hide");
        }
    } else { //it's Next
        panel_index++;
        if (panel_index < 3) {
            $(".panel[id='" + panel_index + "']").removeClass("hide");
        } else {
            $(".panel[id='1']").removeClass("hide");
        }
    }
});

发生了什么:

行为异常。它没有按预期工作。这是无法解释的，请参阅 this fiddle .

为什么会这样？有人可以帮忙吗？

注意:如果有人可以删除我的硬编码 ID 并且无论有多少个 div 都可以让它工作，那就太好了，谢谢。 :)

Answer 1

jsBin demo

只需为您的按钮分配一个类(如 next-news)(不要让您的 JS 逻辑依赖于文本，只有添加的空格可能会阻止它)

<a href="#" class="pull-left  prev-news">Prev</a>
<a href="#" class="pull-right next-news">Next</a>

这就是您所需要的:

var $panel = $('.panel-slider .panel'),
    idx = 0;

$(".prev-news, .next-news").click(function () {
    $panel.addClass("hide");
    idx = ($(this).hasClass('next-news') ? ++idx : --idx) % $panel.length ;
    $panel.eq(idx).removeClass("hide");
});