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

【问题标题】：how to use jQuery to show and hide HTML using html buttons如何使用 jQuery 使用 html 按钮显示和隐藏 HTML
【发布时间】：2013-06-06 05:25:07
【问题描述】：

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

嗨！

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

这是想要做的：

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

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

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

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

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

请注意，我应该可以输入任何 html 代码，而不仅仅是一个句子，我用它来举例。

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

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

【问题讨论】：

你尝试过什么吗？
我尝试过使用 javascript 但失败了，
这里是演示jsfiddle.net/Fs73d/2

标签： jquery html forms

【解决方案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 的

【讨论】：

如果你有图片，这看起来。有没有其他插件。我想要一个可见的“下一个按钮”
您也可以将它与文本一起使用

【解决方案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>

还有隐藏所有句子的 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/

【讨论】：

我知道如何将 css 添加到 HTML，但我不知道如何将 jquery 添加到 HTMl...对不起，我很笨
是的，这行得通。不要忘记还包括 jquery 库本身（首先）。
jQuery 是一个有助于简化 HTML 文档操作的库（javascript 脚本）。就像任何其他脚本一样，您将它包含在您的页面中。我更新了我的解决方案以显示包含 CSS 和 javascript 代码的实际代码，包括直接从 Google 托管的库加载 jQuery。
我看到了小提琴，当我是底部的另一个
时，它工作正常。但是当我添加一个

时，它停止工作
我已经更新了小提琴（新链接），并且我的代码可以使用任何元素类型/

【解决方案3】：

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

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

【讨论】：

你能帮我解决这个问题吗，我很困惑

时，它停止工作