如何在javascript中连续点击按钮显示下一个元素
在JavaScript中实现连续点击按钮显示下一个元素，可以通过以下步骤实现：
- 首先，为按钮添加一个点击事件的监听器。
- 在点击事件的处理函数中，使用DOM操作获取下一个要显示的元素。
- 使用CSS属性控制该元素的显示与隐藏状态。
下面是一个示例代码：
// HTML部分
<button id="nextButton">下一个</button>
<div class="element">元素1</div>
<div class="element">元素2</div>
<div class="element">元素3</div>
// JavaScript部分
var nextButton = document.getElementById("nextButton");
var elements = document.getElementsByClassName("element");
var currentIndex = 0;
nextButton.addEventListener("click", function() {
// 隐藏当前元素
elements[currentIndex].style.display = "none";
// 计算下一个元素的索引
currentIndex = (currentIndex + 1) % elements.length;
// 显示下一个元素
elements[currentIndex].style.display = "block";
});在上述代码中，我们首先获取了按钮和所有要显示的元素。然后，我们为按钮添加了一个点击事件的监听器。在点击事件的处理函数中，我们先隐藏当前显示的元素，然后计算下一个要显示的元素的索引，最后将其显示出来。
这个方法适用于任意数量的元素，并且可以循环显示。如果点击按钮时需要执行其他操作，可以在点击事件的处理函数中添加相应的代码。
相关·内容
我在一页上有5分。就像这样：
<div id="div1"> some content </div>
<div id="div2"> some content </div>
<div id="div3"> some content </div>
<div id="div4"> some content </div>
<div id="div5"> some content </div>
<b
浏览 4提问于2016-11-03得票数 0
回答已采纳
1回答
我在做一份调查表格。它应该一次显示一个问题。
每个问题都有许多单选按钮。当单击一个单选按钮时，问题将被移除(显示:无；可能使用滑动动画)，下一个将进入视图。
这是我们到目前为止的表单和结构的简化版本。我以前还没有做过那么多的前端编程--所以我不知道是否有一种简单的标准方法可以用Javascript或jQuery来实现这个目的？
会非常感激一些指向正确方向的指示。以下是一个概念：
显示带有问题1的div
点击无线电按钮
用问题1隐藏div
用问题2显示div
点击无线电按钮
用问题2等隐藏div ..。
浏览 2提问于2015-01-26得票数 0
如何在iframe标记中使用onclick来调用javascript。
我基本上想要重定向到其他页面时，当用户点击一个iframe，我增加了facebook喜欢按钮我的网站，这是一个iframe代码。因此，一旦他点击了相似的按钮，我希望他被重定向到一个感谢页面。
编辑：，我不想重定向iframe，但是我想在与iframe的任何交互中重定向主页。在解决方案是集中或点击iframe我应该能够重定向。我至少可以这么做吗。
浏览 1提问于2010-10-08得票数 1
回答已采纳
1回答
我正在尝试构建一个三星智能电视(Tizen)应用程序。现在，该应用程序可以在实际测试的电视连续剧6000上工作。
我有四个文本字段，第一个文本字段中有autofocus。电视键盘打开了，我看到了“完成”按钮。如何使用“下一步”按钮进行连续输入？
请看5.4：
我找不到任何关于那个…的信息
我的源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=19
浏览 0提问于2016-12-12得票数 0
我在李里面有几个点击按钮。我想知道如何在JavaScript函数中单击每个按钮的标题?我想预先设置按钮的标题等于variable.Thanks。
<javascript>
function MyFunction(MyFile,MyImage){
//here i want to get the title of onclick button which is Mango and set it equal to variable.
}
</javascript>
<li><a id="123456&#
浏览 11提问于2016-02-28得票数 2
回答已采纳
在我的网站的index.html页面中有三个按钮。
单击这些按钮后，页面重定向到另一个名为productandservices.html的页面。在他们的I显示鱼为每个选定的类别(当有人选择淡水鱼类在index.html，它显示淡水鱼在productandservices.html)。
<a href="servicesAndProduct.html"><button class="menu-buttons">FRESHWATER FISH</button></a>
<a href="se
浏览 7提问于2022-01-16得票数 1
我的按钮已经准备好了，我只是不知道我该用javascript写些什么来让它在点击时显示文本(而不是警告)。 <button onclick="text()">Show text</button> 我应该如何在javascript中编写文本函数，以便当我按下按钮时，它会添加一个段落:按钮工作(我可以自己设计它)。 如果有人想知道我在尝试做什么，这是一个有真正基本答案的测验(只是为了好玩而尝试html，css和javascript )。无论何时单击我现有的按钮(代表可能的答案)，您都会收到一条警告： alert("Correct answer
浏览 12提问于2020-01-21得票数 0
3回答
我在我的应用程序中有一个asp按钮，它在mozilla，chrome和IE8中运行良好，但在IE9中不起作用，我尝试了很多，但没有得到任何解决方案。
有人能帮帮我吗？
<asp:Button CssClass="Button" ID="btnInsert" runat="server" Text="Insert" OnClick="btnInsert_Click" />
当我使用开发人员工具(F12)检查我的按钮时，我的按钮显示如下
<input name="btnInsert"
浏览 0提问于2012-01-13得票数 1
回答已采纳
我有一个很大的数据要显示在Tableview单元格中，谁能告诉我如何在单击显示按钮后仅显示其中的10个。然后当用户点击load more按钮时添加更多的10。
提前谢谢。
浏览 0提问于2010-09-24得票数 1
回答已采纳
我有一个将网页转换为图像的要求。当用户点击( clicks )按钮时，新窗口需要将网页显示为图像。
在Javascript或Google web工具包中可以做到吗？
浏览 3提问于2009-10-29得票数 4
2回答
我使用引导程序，每次用户点击" add“按钮时，我都想添加一组字段。我编写了javascript的一部分：
$(document).ready(function(){
var i = 1;
$("#add_row").click(function(){
$('#singleCommercial' + i).html('...');
$('#listOfCommercials').append('<div id="singleCommercial'
浏览 1提问于2015-09-17得票数 0
回答已采纳
4回答
我对this元素有一个问题(我知道this是如何工作的)。
我有很多这样的html结构。当我单击a按钮时，必须显示类为extra-options的div。但是因为我有很多相同的html结构，所以当我点击按钮时，所有其他的div选项也会显示出来。
我怎么才能修复它？
下面是JavaScript：
var buttonSubmit = $(".extra-options .details a.button");
buttonSubmit.click(function (e) {
e.preventDefault();
var extraOpt
浏览 0提问于2012-01-04得票数 3
回答已采纳
3回答
在angular和javascript中一般情况下，如何单元测试动作一样，点击一个按钮就应该显示对话框，点击同一个按钮时显示的框就隐藏了这个框。我的问题是如何测试元素dom属性？在GWT中，一种称为MVP (模型、视图、控制器)的模式设计。其中控制器是测试，而不是视图！
浏览 0提问于2012-11-30得票数 2
回答已采纳
我想验证登录页面使用java脚本函数。我使用一个标签按钮来显示消息，两个文本框用于用户名和密码，一个按钮用于“登录”。
当用户在没有输入用户名和密码的情况下点击“登录”按钮时，消息将显示在标签控件中。那么如何检查javascript函数中的textbox值，以及如何更改lblmessage中的值。我在Ok按钮中调用了这个函数。我在按钮OnClientClick事件上设置了这个函数，但它不起作用。
浏览 0提问于2011-11-20得票数 0
2回答
我正在学习如何开发，我想使用HTML5、CSS3和JavaScript开发一个简单的“点击”游戏。我想练习创建类似Cookie Clicker的东西。我创造了三个图标，每个图标都有一个目的。我想弄清楚如何在屏幕的一部分上显示一个修改过的变量，而不需要清除屏幕，或者不得不使用窗口弹出。
如果有人有兴趣帮助该项目，以下是该项目的链接：
所讨论的函数是displayPoints文件中的master.js函数。我目前有以下情况：
function displayPoints() {
confirm(numClicks);
}
这能做我想做的。它显示正确的点击次数。如果我点击中间按钮20次，然
浏览 3提问于2014-05-25得票数 1
回答已采纳
我在我的Vala应用程序中使用webkit2gtk-4.0来显示Google。我需要在点击按钮上得到标记坐标。我该怎么处理呢？
我知道了如何使用run_javascript()运行javascript，但我无法理解如何获得结果。
浏览 3提问于2014-12-03得票数 1
回答已采纳
我对JavaScript中的这个下载概念还很陌生。在我的应用程序中，我创建了一个二维码(画布图像)。然后通过使用JavaScript，我想在点击一个按钮时下载二维码。我该如何继续呢？
我也是用PHP完成的，如下所示
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename='.basename($file));
readfile($file);
它很容易工作，但我如何在JavaScript中完成同样的工作
另外，我想在点击
浏览 0提问于2012-01-30得票数 1
1回答
下面是我的下拉列表：
<div id="addCam"></div>
<div id="addDiv">
<select id="type1">
<option value="">- Kiểu áo -</option>
浏览 0提问于2015-11-16得票数 2
2回答
在选择输入字段时，我想显示一个元素，但优先考虑的是我不使用任何JavaScript来这样做。
因为我不能将元素放在输入字段中(很明显)，所以我不能在CSS中针对输入字段是活动的(我假设:active选择器可以在当前被选中的输入字段上使用，而不是让鼠标点击它)。
目前我有一个这样的结构：
<div class="outer">
<input type="text" name="field" />
<div class="element"></div>
</div>
浏览 1提问于2014-11-18得票数 2
回答已采纳
我想创建和显示后，我的元素只有在小按钮点击菜单。
我有一个运行函数"doAction“的小按钮
<i class="fa fa-ellipsis-h" ng-click="doAction(\'OpenMenu\', $event)"></i>
在我的函数'doAction‘中，我想从鼠标点击事件中获取位置X，Y，并在此位置显示我的菜单。几乎所有的东西都能正常工作。我对‘下拉菜单’有问题。更准确地说，我看到上面描述的按钮和这段代码中的按钮(id=test)：
var menu = angular.elem
浏览 0提问于2017-07-05得票数 0
我试图通过Javascript生成的动态链接直接在HTML中显示图像。
function dynamicUrl() {
var url = "http://xxx.xxx.xxx" + dynamic_variables + ".jpg";
return url;}
我的大部分研究，人们通过点击按钮来显示图像，或者我现在能做的就是链接到图像。
<a href="javascript:window.location=dynamicUrl();">test</a>
有人知道如何使用动态URL直接显示图像吗？谢谢!
浏览 0提问于2017-06-03得票数 2
回答已采纳
我正在使用谷歌翻译器，它创建了动态翻译栏，它有显示原始按钮(点击下面的图像链接)。
我想使用javascript或jquery手动触发"show original“按钮的单击事件，但它不起作用，请参阅我尝试的一些代码片段。
$("#myBtn").click(function(){
$("#\\:1\\.restore").click();
//or
$("#\\:1\\.restore").on('click');
//or
$("#\\:1\\.restore")
浏览 0提问于2015-05-25得票数 0
1回答
我意识到这是一个常见的问题，我一直在寻找解决方案，我正在尝试使用这个解决方案(它适用于jsfiddle)，但当我试图在我的网站上使用它时，它就是行不通的。我试着在点击按钮的时候显示一个div。我做错了什么吗？也许javascript有什么问题吗？或者我需要包含一个jquery文件？谢谢你提前帮忙。
下面是我试图使用的代码：
<script type="text/javascript">
$("#seeAnswer").click(function() {
$('#subtext').html($(this).next().
浏览 1提问于2014-04-04得票数 0
回答已采纳
4回答
我有这段代码，它依赖于动态驱动器中的javascript：，它是一个表单依赖管理器。它将根据您从显示的表单中选择的内容来显示或隐藏元素：
我不知道为什么，但是如果我把代码改成这样：
<td>
<label>ID Number<input type="checkbox" name="id" class="DEPENDS ON info BEING student"></label>
</td>
</tr>
要这样做：
浏览 2提问于2010-04-26得票数 3
回答已采纳
2回答
所以我有两个按钮，一个用于显示嵌入，另一个用于隐藏嵌入。它们看起来像这样：
<div class="button">
<button class="btn-info" onclick="hide('myPdf')" type="button">HIDE</button>
</div>
<div class="button">
<button class="btn-info" onclick="s
浏览 1提问于2016-08-28得票数 2
我在一个页面上有3个更新面板。它们中的每一个都被设置为有条件更新。在每个更新面板中，我都有一个按钮控件，当单击该控件时，将用数据填充面板。每个面板都是相互独立的。
当您手动单击各自面板中的三个按钮中的每一个按钮时，一切都正常工作。当我使用JavaScript点击按钮时，我遇到了这个问题。我成功地执行了一个JavaScript调用，但当我尝试用JavaScript单击所有3个按钮时，情况并不稳定。根据我在代码中放置JavaScript调用的位置，不同的面板可以工作，而其他面板不能。
例如：
__doPostBack('btnBindTeamTicketList', '&#
浏览 0提问于2012-01-07得票数 0
回答已采纳
是否可以在javascript中创建document的复制变量
因为我是一个C#开发人员，所以我想要像这样的东西
var doc=new document();
var doc = document;
doc.open('application/txt', 'replace');
doc.charset = 'utf-8';
doc.write('Message to write in txt file');
doc.close();
if (doc.execCommand(
浏览 0提问于2012-07-21得票数 0
回答已采纳
我在黑莓的全局屏幕上显示推送通知，我需要通过点击对话框中的确定按钮来推送屏幕。我想通过点击ok按钮来启动app。
请帮帮我。提前感谢！
浏览 4提问于2012-07-17得票数 0
回答已采纳
1回答
我实现了一个javascript代码，它将div转换为画布。以下是代码：
JS
$(window).load(function(){
$(function() {
$(".btnSave").click(function() {
onrendered: function(canvas) {
thyCanvas = cnvs;
document.body.appendUncle(cnvs);
cnvs.toWall(function(Wall)
浏览 2提问于2015-08-20得票数 1
回答已采纳
2回答
我有一个asp.net mvc5 web应用程序，它有5页。最后三页的信息是从前两页传递过来的。所以这就像我的前两页是动态的，最后三页是根据前两页变化的。
我的程序只做以下事情
我填写信息在第一页，点击提交按钮通过投递请求，填写信息在第二页，并点击提交按钮从第二页。其余页面只显示结果。
但是当我按下浏览器表单第二页的后退按钮，改变第一页中的值，按提交按钮时，我就会丢失第二页的所有数据。我希望第二页保留它以前的状态。。
我真的不知道这有多难。所以，有些人能告诉我如何解决这个问题吗？在advance.Here中感谢只是示例代码来说明这是第二页
<form action="thir
浏览 1提问于2015-08-23得票数 0
它很简单，可以在javascript中显示和隐藏。如果我把点击按钮放在div框上方，那么脚本就能工作，但是如果我把它放在div框下面，它就不能工作了。
我该怎么做才能让订单是
<div class="box">
<ul>
<li>
Phones
</li>
<li>
TV
</li>
</ul>
</div>
<a href="#" class="clickm
浏览 0提问于2018-07-23得票数 0
回答已采纳
在angularjs中是否有一种方法可以动态地(在角引导之后)通过使用decorator模式代理服务来增强服务。
在下面的中，我可以重载我的默认搜索服务(基于谷歌)，但这依赖于在引导角度应用程序之前使用应用程序的app.requires依赖项来声明/添加重载模块( yahoo )。一旦角应用程序已经引导，这就不起作用了，点击duckduckgo按钮时就会显示出来。
我必须动态地将javascript代码注入到迁移场景中，在迁移场景中，必须将webapp嵌入到java客户端(使用JavaFX webview)，而某些操作(动态引入的操作)必须替换webapp的标准行为。
我试过使用描述的一些技术
浏览 1提问于2015-06-02得票数 2
回答已采纳
我试图点击一个按钮，打开同一个页面上的编辑屏幕。
例如：点击“编辑用户”，编辑屏幕弹出在同一页面，无需重定向，更改名称，保存。此按钮不重定向到新页。
此按钮的代码如下：
<a href="javascript:;" data-id="29508" class="btn btn-xs btn-inverse btn-modify"><i class="fa fa-pencil"></i> Edit</a>
由于某些原因，我可以点击这个网站上的所有其他按钮，这是相同的形式，但我不能点击这
浏览 2提问于2017-07-21得票数 0
回答已采纳
我正在开发一个通过ajax请求加载动态内容的博客，我试图用一个按钮隐藏/显示文章的"post comment“表单：
<div id="post">
...
<ol id="update" class="timeline">
<!-- comments here -->
</ol>
<button class="mybutton Bhome">Commenta</button><!-- hide/show button --&
浏览 0提问于2012-10-18得票数 1
回答已采纳
在C# VS 2005支持AJAX的web上工作。我想在我的网页上显示弹出消息。在我的桌面应用程序中，我编写以下代码来显示一条消息：
MessageBox.Show("Data Saved Successfully.", "Save", MessageBoxButtons.OK, MessageBoxIcon.Information);
我想要这样的信息。在这里我可以设置消息图标，消息标题，消息文本...我为web写了一段代码：
s = "<script type=\"text/javascript\">alert('
浏览 4提问于2009-09-27得票数 1
我试图创建一个点击事件，首先显示一个加载图标，然后是一个正负图标。我的代码最初是在第一次单击时工作的，但是当我再次单击相同的图标时，它就不会继续icon语句。
以下是我的Jquery代码：
$('a.addQueue').click(function(){
var plusIcon = '<i class="fa fa-plus"></i>';
var minusIcon = '<i class="fa fa-minus"></i>';
va
浏览 2提问于2014-05-29得票数 2
我创建了一个超文本标记语言注册页面使用HTML5和Javascript它的工作，但点击提交按钮后，我必须显示用户在另一个注册表(这是隐藏在同一页上，然后再点击提交按钮)输入的详细信息。一旦你点击了提交按钮，那么注册表必须显示，我们输入的细节也必须显示出来。
浏览 1提问于2013-07-04得票数 0
在这个表单中，我希望当用户点击按钮时，它会在用户点击的按钮下面显示文本区域和按钮。很像提前开具发票或备注。在文本区，用户可以写任何注释或修改，只写纯文本。这是按钮代码<button type="button" id="revision" onclick="myFunction()" class>Revision</button>的示例，这是javascript <script>
function myFunction() {
document.getElementById("demo"
浏览 14提问于2019-07-02得票数 0
回答已采纳
1回答
我显示一个div，并通过单击关闭按钮关闭它。另外，如果单击不在此之外，则模式应隐藏。我所有这些都是用这个代码做的
$('.openModal').on('click', function() { $('#Modal').slideToggle(1000);});
$('.close').on('click', function() { $('#Modal').slideToggle(600); });
// When the user clicks anywhere outside of
浏览 0提问于2019-01-09得票数 0
回答已采纳
1回答
您好，请告诉我如何显示子元素在右元素.My函数第一次工作正常，但它第二次失败。
我执行以下步骤
1)按Add按钮2 times.Generate row2以及firstLevel的submenu。2)展开菜单选项(+) Button.Click "menu_tc_1".It remove rows on right panel .and按下add按钮它创建嵌套子菜单。
3)当你再次按"menu_tc_1“时，它显示的行数与你点击”添加“按钮的行数相同。
4)但是当你点击"First Level“时，它应该显示两行，因为它有两个子元素(”menu_tc_1“，&#
浏览 2提问于2014-04-28得票数 2
当我点击按钮时，在javascript后台运行的是哪种代码并不意味着:a.click a= document.getElementById('hello')；var ()；
我的意思是，这个“click”函数中的哪些代码
浏览 1提问于2020-04-20得票数 0
在asp.net页面中，我需要知道如何维护由html按钮点击分配的特定标签的值。回发完成后。
详细代码：
<table>
<tr>
<td><asp:Label ID="lbl1" runat="server" ClientIDMode="Static">Before Changing</asp:Label></td>
<td><asp:Label id="lbl2" run
浏览 0提问于2014-01-03得票数 4
回答已采纳
2回答
我在这里建立一个博客：
我的Jquery：
<script>
$(document).ready(function(){
$('.Share-button').click(function(){
$('.share-icon').toggle();
});
});
</script>
这应该很简单，但我的大脑被烧焦了。我只需要共享图标，我点击显示共享按钮。现在，如果您单击1共享图标，所有帖子显示所有按钮。我
浏览 1提问于2015-01-20得票数 0
回答已采纳
我的HTML由文本行(问题)和每个文本行旁边的按钮组成，用于显示/隐藏答案。它是这样的。
<div id="test">
<ul>
<li>ques 1 <button>view/hide answer</button> </li>
<div id="ans1">
Answer 1
</div>
<li>ques 2 <button>view/hide answer</button></li>
<
浏览 2提问于2011-08-24得票数 0
回答已采纳
假设您有一个button.In this按钮，您有一个名为one的ArrayList对象，该对象应该被遍历，以便在单击该按钮时显示所有值。我最初的尝试是：
btnFrw.setOnAction(e ->{
Iterator<String> iterator = one.iterator();
while(iterator.hasNext()){
StringTokenizer st =
浏览 0提问于2015-04-17得票数 1
我有个问题要问Laravel
$query = Work::inRandomOrder()->where('orientation', $request->get('orientation')->paginate(11);
我有一个“加载更多”按钮，每次点击都会呼叫11个其他人。
但是，我想以随机顺序显示我的数据。但是在这个查询中，他向我重复了几个数据。所以在我的作品清单中，我有2到3次相同的作品，显然，它并不好。有没有办法使用RandomOrder ()来避免重复？
谢谢
浏览 0提问于2017-05-16得票数 1
1回答
因此，我在Behat/Mink中有以下非常简单的测试。当按下一个按钮时，会显示一个元素，然后我会用一些文本填充该元素。这个测试有时有效，有时不起作用。下面是基本结构：
file.blade.php
<button id="show-inputs">Show</button>
<div id="inputs" class="hidden">
<span>Input</span>
<input type="text" id="test-input"
浏览 11提问于2021-02-25得票数 1
我使用ng-repeat来生成这个列表。在每个列表项中都有一个按钮。点击按钮，action()函数触发并返回值。一旦action()函数返回值如下: 1)插入div ()并在div中显示消息以及操作按钮(ng- action2 =“action2({{ return value from action() function}})”并传递action()函数返回的值)。
下面是代码片段
<ul class="list-group" ng-repeat="item in items">
<li class="list-group-i
浏览 6提问于2016-05-13得票数 0
4回答
我有一个带有一个切换按钮和一些下拉项的HTML页面。我的开关按钮就像开-关一样。
我需要什么？？我需要在点击" on“时隐藏下拉项，在点击时显示下拉项
开“关”。我在HTML , CSS, JQuery上是个新手。这是我的HTML文件的代码，它只起作用
用于切换。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
type="text/javascript"></script&g
浏览 1提问于2012-08-27得票数 2
回答已采纳
我有代码，将自动添加一个新的类似行定义在表单中点击添加按钮。
<html>
<body>
<form>
<input type="text" name="quantity[]" class="input_text" id="pro"/>
</form>
</body>
</html>
现在我想在javascript函数中访问不同的quantity[]值。
如何在javascript中使用quantity[]的ID或名称属性来访问这些不同的值。
浏览 0提问于2013-04-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
