我的自定义 jQuery 滑块发生了奇怪的事情答案

【问题标题】：Strange things are happening with my custom jQuery slider我的自定义 jQuery 滑块发生了奇怪的事情
【发布时间】：2014-09-14 21:51:21
【问题描述】：

我正在设置一个非常简单的 jQuery 滑块，当单击箭头（右或左）时，它将淡出 3 段文本。我遇到的问题是循环浏览段落，它没有正确增加。在第一个箭头单击时，它会跳到第三段。然后在再次单击后重复第三段。

这是一个 jsfiddle：http://jsfiddle.net/j0h2qy0z/

基本的 HTML 是：

<div class="textSlider">
    <div class="sliderArrow arrowLeft"><span><</span></div>

    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>

    <div class="sliderArrow arrowRight"><span>></span></div>
</div>

jQuery 将每个段落的内容存储在一个数组中

var paragraphs = [];

$('p', '.textSlider').each(function() {
    var content = $(this).html();
    paragraphs.push(content)
});

并隐藏除第一个以外的所有段落

$('p', '.textSlider').first().siblings('p').hide();

我试图在 jsfiddle 中给出好的 cmets，所以这可能是查看发生了什么的最好方法，但似乎问题可能出在这段代码中，但我似乎无法弄清楚发生了什么：

if (currentParagraph < numParagraphs && currentParagraph >= 0) {
     currentParagraph += direction;   
} else if (currentParagraph < 0) {
    currentParagraph = numParagraphs;
} else {
    currentParagraph = 0;
};

提前致谢！

【问题讨论】：

标签： javascript jquery html arrays logic

【解决方案1】：

我希望你不介意，但我改变了一些东西（在我看来更容易理解）：

HTML：

<table align="center">
    <tr>
        <th id="backward"><span><<</span></th>
        <td class="slide-head">Paragraph 1</td>
        <td class="slide-head hidden">Paragraph 2</td>
        <td class="slide-head hidden">Paragraph 3</td>
        <!-- ... -->
        <th id="forward"><span>>></span></th>
    </tr>
</table>
<p class="content" align="center">Paragraph 1 content</p>
<div class="paragraphs hidden">Paragraph 1 content</div>
<div class="paragraphs hidden">Paragraph 2 content</div>
<div class="paragraphs hidden">Paragraph 3 content</div>
<!-- ... -->

CSS：

.hidden {
    display:none;
}

table td {
    padding:0px 80px 0px 80px;
}

#forward span, #backward span {
    background-color:green;
    padding: 0px 5px 0px 5px;
}

#forward:hover span, #backward:hover span {
    font-size:17px;
}

#forward:active span, #backward:active span {
    font-size:16px;
}

Javascript：

$(function() {
    var headers    = (a) => $(".slide-head:eq(" + a + ")"),
        content    = $(".content"),
        paragraphs = (a) => $(".paragraphs:eq(" + a + ")"),
        curIndex   = 0;

    $("#backward, #forward").click(function() {
        headers(curIndex).addClass('hidden');
        if ($(this).attr("id") === "backward") {
            curIndex = (curIndex > 0) ? curIndex - 1 : $('.slide-head').length - 1;
        } else {
            curIndex = (curIndex < $('.slide-head').length - 1) ? curIndex + 1 : 0;
        }
        headers(curIndex).removeClass('hidden');
        content.text(paragraphs(curIndex).text());
    });
});

这是一个fiddle

【讨论】：