JQuery (“button”).click doesn't work
Question
The example below works. (Example taken from w3cschools, and hacked a bit.) Clicking anywhere in the DIV will cause the address class div to disappear. However, changing the third line of the script to read
$("button").click(function(){
instead of "div" and it just sits there like a paperweight. What am I missing.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").click(function(){
$(this).children(".address").toggle("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>Island Trading</h3>
<div class=ex>
<button>Hide me</button>
<div class=address>
<p>Contact: Helen Bennett<br>
Garden House Crowther Way<br>
London</p>
</div>
</div>
<h3>Paris spécialités</h3>
<div class=ex>
<button class="hide">Hide me</button>
<div class=address>
<p>Contact: Marie Bertrand<br>
265, Boulevard Charonne<br>
Paris</p>
</div>
</div>
</body>
</html>
4 answers
solution1
2 ACCPTED 2014-01-24 00:00:10
Change
$(this).children(".address").toggle("slow");
To something like:
$('.address').toggle("slow");
OR
$(this).siblings(".address").toggle("slow");
Once you make the listener act on the button element, .address is not a child of button any longer. It's a sibling. If there will be multiple .address classes on your page, you must use siblings.
solution2
0 2014-01-24 00:00:18
Try this:
$("button").on("click", function(){
$(this).parent().children(".address").toggle("slow");
});
solution3
0 2014-01-24 00:01:09
$(this).parent().children(".address").toggle("slow");
该按钮没有孩子
solution4
0 2014-01-24 00:04:56
$("div").click(function(){
$(this).children(".address").toggle("slow");
});
The meaning of such code above is that, when click trigger in div container, it will go through its children for matching "address" class attribute.
However, if you just change $("div") to $("button"), but no child appears within button element. nothing matches for toggle function, just ignore it.
You should change code to as below:
$("button").click(function () {
$(this).next(".address").toggle("slow");
});
which find next sibling to button element. That is the element you want.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.