0

（我将尽可能描述，如果您需要更多信息，请在评论中告知）

你好！

我不知道 jQuery 是什么以及它做了什么，SO 的一个人告诉我它做了我该做什么。

这是想要做的：

我有 5 个不同的句子，让我们以这些为例：

  • 句子 01
  • 句子 02
  • 句子 03
  • 句子 04
  • 句子 05

我想做的是一次显示 1 个句子。当用户按下下一个按钮时，下一句应该出现，第一句应该隐藏，然后如果用户再次按下下一个，第三句应该出现，第二句应该隐藏。

我想在一个页面中执行此操作，这意味着下一个按钮不应链接到下一个句子所在的另一个页面。

还应该有一个上一个按钮，如果用户正在观看第二句并且他想回到第一句。

请注意，我应该能够输入任何 html 代码，而不仅仅是一个句子，我用它作为示例。

而且，如果我想添加更多 html 代码（如第 6 句），我可以将它添加到我的 html 文件中，如果我再次单击下一步，它应该会弹出，并且我不必每次添加更多内容时更改任何 jQuery在。

如果您认为 jQuery 无法完成所有这些，请告诉我它是如何完成的。谢谢... 我知道这有点过分了，如果有志愿者想帮助我，那将是莫大的荣幸。

4

3 回答 3

1

您可以使用内容滑块 jQuery 插件，例如

http://bxslider.com/

使用方便

html

<ul class="bxslider">
  <li>My text 1</li>
  <li>Text 2</li>
  <li>text3</li>
  <li>Another text</li>
</ul>

jQuery 

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

当然它是基于 jQuery 的

于 2013-06-06T05:31:05.967 回答
0

这是一个可能的解决方案。

假设我们有这样的 HTML：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="mystyles.css" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="myscript.js"></script>
  </head>
  <body>
    <input type=button id=prevBtn value="Prev" />
    <input type=button id=nextBtn value="Next" />
    <div id=sentences>
      <p>Sentence 1</p>
      <p>Sentence 2</p>
      <p>Sentence 3</p>
      <p>Sentence 4</p>
      <p>Sentence 5</p>
    </div>
  </body>
</html>

还有隐藏所有句子的 CSS，除非它们有一个“当前”类（mystyles.css）：

#sentences * {
    display: none;
}
#sentences .current {
    display: inline;
}

然后这段代码会做你想做的事（myscript.js）：

jQuery(function($) {
    $('#sentences *').eq(0).addClass('current'); // start by showing the first sentence
    $('#nextBtn, #prevBtn').click(function() {
        var currItem = $('#sentences .current');
        var newItem = ($(this).attr('id') == 'nextBtn') ? currItem.next() : currItem.prev();
        if (newItem.size() > 0) {
            currItem.removeClass('current');
            newItem.addClass('current');
        }
    });
});

基本上，我们首先将current类赋予列表中的第一项。
然后我们有一个点击处理程序，它可以找到当前项目，并根据按下的按钮移动next()或移动。prev()如果这导致了一个有效的项目（我们不在列表的开头/结尾），那么我们current从当前项目中删除该类，并将其添加到我们找到的新项目中。

这个解决方案的小提琴在这里：http: //jsfiddle.net/39CYu/

于 2013-06-06T05:41:15.963 回答
0

你为什么不试试这个。使用一个字符串数组来存储所有的句子。还有一个变量来存储正在显示的字符串的当前索引。

var arr = ["sentence 1", "sentence 2", "sentence 3", "sentence 4", "sentence 5"]; var currPos = 0;.

然后当用户点击上一个按钮时，你可以做这样的事情，

$('#prev').on('click', function(e){ currPos--; currPos = Math.abs(currPos); var currStr = arr[currPos]; $('#text').innerHtml = currStr; }); 当用户单击下一步按钮时，您可以执行以下操作，

$('#next').on('click', function(e){ currPos++; currPos = Math.abs(currPos); var currStr = arr[currPos]; $('#text').innerHtml = currStr; });

于 2013-06-06T05:44:39.350 回答