Question

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

喜！

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

这是我们想要做的：

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

第01句
第02句
第03句
句子04
第05句

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

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

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

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

而且，如果我想添加一些更多的HTML代码（如句子6），我可以将它添加到我的html文件中，如果我再次点击它，它应该弹出，我不必每次都改变任何jQuery添加更多内容。

如果您认为jQuery无法做到这一切，请告诉我它是如何完成的。谢谢...我知道这有点太多了，如果志愿者想帮助我，那将是一种莫大的荣誉。

Answer 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的

Answer 2

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

假设我们有这样的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>

除非他们有一个'current'（mystyles.css）类，否则隐藏所有句子的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/

Answer 3

你为什么不尝试这个。使用一个字符串数组，您将存储所有句子。和一个变量，用于存储正在显示的String的当前索引。

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

如何使用jQuery来使用html按钮显示和隐藏HTML

3 个答案: