[英]How to show a div when a particular button is clicked,
This my js code: 这是我的js代码:
i want to click first button to call a new class,it works but, every button doing same work. 我想单击第一个按钮来调用一个新类,它起作用,但是,每个按钮都做同样的工作。 when i click second button this also calling a new class.please help me to solve this.
当我单击第二个按钮时,这也会调用一个新的类。请帮助我解决这个问题。
<script> $(document).ready(function(){ $("button").click(function(){ /*button click event*/ $(".new").toggle(); /*new class calling */ }); }); </script>
this my html code: 这是我的html代码:
<button>first</button><br> <button>second</button><br> <button>third</button><br> <div class="new" style = "display: none;">hi.</div> <!--i need to call only this class--> <div class="old"><a href="www.google.com">hello.</a></div>
You have to set an id to that particular button and then attach click event handler to that particular button using id. 您必须为该特定按钮设置一个ID,然后使用ID将点击事件处理程序附加到该特定按钮。 Here is the code.
这是代码。
<button id ='myBtn' >first</button><br>
$("#myBtn").click(function(){ /*button click event*/
$(".new").toggle(); /*new class calling */
});
You can use contains('first')
. 您可以使用
contains('first')
。
The thing is that your using button
as selector, that will not understand which button is clicked actually. 问题是您使用
button
作为选择器,将无法理解实际单击了哪个按钮。
I would recommend, To make jQuery understand you should provide any specific id to that element. 我建议,为了使jQuery理解,您应该为该元素提供任何特定的ID。
But if you want to do it based on the text inside a DIV, you can use contains('first')
. 但是,如果要基于DIV中的文本进行操作,则可以使用
contains('first')
。
$(document).ready(function(){ $("button:contains('first')").click(function(){ /*button click event*/ $(".new").toggle(); /*new class calling */ }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>first</button><br> <button>second</button><br> <button>third</button><br> <div class="new" style = "display: none;">hi.</div> <!--i need to call only this class--> <div class="old"><a href="www.google.com">hello.</a></div>
$(document).ready(function() { $("button").eq(0).click(function() { /*button click event*/ $(".new").toggle(); /*new class calling */ }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <button>first</button> <br> <button>second</button> <br> <button>third</button> <br> <div class="new" style="display: none;">hi.</div> <!--i need to call only this class--> <div class="old"><a href="www.google.com">hello.</a> </div>
use .eq()
to select which button you need the click 使用
.eq()
选择需要单击的按钮
Note: eq() is index based which starts with 0 注意:eq()是基于索引的,从0开始
If you want to click first button to call a new class , you can do by many ways .Here is checking with clicked text to get first button click 如果您想单击第一个按钮来调用新课程,则可以通过多种方法进行。这里正在检查单击的文本以使第一个按钮单击
<script>
$(document).ready(function(){
$("button").click(function(){ /*button click event*/
if ($(this).text() == "first" ) $(".new").toggle(); /*new class calling */
});
});
</script>
set id
is the better 设置
id
更好
<button id="first">first</button><br>
<button>second</button><br>
<button>third</button><br>
<script>
$(document).ready(function(){
$("#first").click(function(){ /*specific button click event*/
$(".new").toggle(); /*new class calling */
});
});
</script>
With $("Button")
you are referring to the Button element and not a certain Button so every button will do the same action. 使用
$("Button")
您指的是Button元素,而不是某个按钮,因此每个按钮都将执行相同的操作。 You should give your Buttons an id and then call them based on their Id. 您应该给按钮指定一个ID,然后根据其ID对其进行调用。
Like: 喜欢:
<button id="firstBtn">first</button><br>
<button id="secondBtn">second</button><br>
<button id="thirdbtn">third</button><br>
And then call them with the id selector #
like so: $("#firstBtn").click()..
然后使用ID选择器
#
调用它们,如下所示: $("#firstBtn").click()..
give id's to the buttons, n call those accordingly like 给按钮赋予id,n相应地调用它们,例如
$("#first").click(function(){
$(".new").toggle();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.