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

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

jquery html forms

如何使用jQuery使用HTML按钮显示和隐藏HTML,jquery,html,forms,Jquery,Html,Forms,（我将尽可能描述，如果您需要更多信息，请在评论中告知）嗨我不知道jQuery是什么，它做什么，SO的一个家伙告诉我它做了我该做的这就是我们想要做的：我有5个不同的句子，让我们以它们为例：第01句第02句第03句第04句第05句我想做的是一次显示一句话。当用户按下下一步按钮时，下一句应该显示，第一句应该隐藏，然后如果用户再次按下下一步，第三句应该显示，第二句应该隐藏我想在一个页面中这样做，这意味着“下一步”按钮不应该链接到下一个句子所在的另一个页面还应该有一个上一个按钮

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

嗨

我不知道jQuery是什么，它做什么，SO的一个家伙告诉我它做了我该做的

这就是我们想要做的：

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

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

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

我想在一个页面中这样做，这意味着“下一步”按钮不应该链接到下一个句子所在的另一个页面

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

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

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

如果您认为jQuery不能完成所有这些，请告诉我它是如何完成的。谢谢我知道这有点太多了，如果一个志愿者想帮助我，那将是一个巨大的荣誉。

你可以使用一个内容滑块jQuery插件，比如

它很容易使用

html

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

当然，它是基于jQuery的

这里有一个可能的解决方案

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

然后，此代码将执行您想要的操作（myscript.js）：

基本上，我们首先为列表中的第一项提供

当前类。

然后我们有一个点击处理程序，它找到当前项目，并根据按下的按钮移动next（）
或prev（）
。如果这导致了一个有效的项目（我们不在列表的开头/结尾），那么我们将从当前项目中删除current
类，并将其添加到我们找到的新项目中
这个解决方案的提琴在这里：为什么不试试这个呢。使用字符串数组存储所有句子。及
用于存储正在显示的字符串的当前索引的变量
var arr=[“第1句”、“第2句”、“第3句”、“第4句”、“第5句]；
var currPos=0
然后，当用户点击prev按钮时，您可以这样做
$（'prev'）。在（'click'，函数（e）上{
柯尔波斯--；
currPos=数学绝对值（currPos）；
var currStr=arr[currPos]；
$（'#text'）。innerHtml=currStr；
});
当用户单击“下一步”按钮时，您可以执行类似的操作
$（“#下一步”）。在（'click'，函数（e）{
currPos++；
currPos=数学绝对值（currPos）；
var currStr=arr[currPos]；
$（'#text'）。innerHtml=currStr；
});您尝试过什么吗？我尝试过使用javascript，但失败了，这是演示，如果您有图像，它会显示出来。你还有其他插件吗。我想要一个可见的“下一步按钮”，你可以将它与文本一起使用，我知道如何将css添加到HTML中，但我不知道如何将jquery添加到HTML中。。。对不起，我是哑巴是的，那会有用的。不要忘记还包括jquery库本身（首先）。jquery是一个库（javascript脚本），有助于简化HTML文档操作。您可以像其他脚本一样将其包含在页面中。我已经更新了我的解决方案，以显示包含CSS和javascript代码的实际代码，包括直接从Google托管的库加载jQuery。我看到了小提琴，当我是底部的另一个时，它工作得很好。但是当我添加一个时，它停止了工作。我已经更新了fiddle（新链接），我的代码可以处理任何元素类型/你能帮我处理这个吗，我很困惑
<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>

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

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