我想做的事情：

Question

我正在尝试制作一个引导面板滑块。为此，我编写了自己的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逻辑依赖于Text，只有添加的空格可能会使其生效）

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

Answer 2

您可以在此处找到解决问题的方法：http://jsfiddle.net/P6RfU/
基本上，当你接近极限时，你没有改变指数

if (panel_index > 1)
{
    panel_index--;
    $(".panel[id='" + panel_index + "']").removeClass("hide");
} 
else 
{
    panel_index=3;
    $(".panel[id='3']").removeClass("hide");
}

希望它可以帮到你，如果你不理解你可以毫不犹豫地提出的部分代码。

Answer 3

根据要求在没有ID的情况下制作。将根据您的意愿使用.panel http://jsfiddle.net/Ksn7q/5/

<强> HTML

<div class="panel-slider">
    <div class="panel">
        <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">
        <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">
        <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>

<强> CSS

.panel:nth-child(n+2) {
    display: none;
}

<强>的jQuery

$(".panel-slider-controls a").click(function () {

    var self = $(this);

    if(self.hasClass('pull-left')) {

        var prevPanel = $('.panel:visible').prevAll('.panel').first();

        if(prevPanel.size() == 0) {

            prevPanel = $('.panel').last();

        }

        $('.panel').not(prevPanel).hide();

        prevPanel.show();

    }
    else if(self.hasClass('pull-right')) {

        var nextPanel = $('.panel:visible').nextAll('.panel').first();

        console.log(nextPanel.size());

        if(nextPanel.size() == 0) {

            nextPanel = $('.panel').first();

        }

        $('.panel').not(nextPanel).hide();

        nextPanel.show();

    }

});

jQuery自定义滑块无法按预期工作

我想做的事情：

发生了什么：

3 个答案: