Controlling <span> tag inside a <div> tag using Jquery
Question
The following code works fine (copied from the w3schools.com)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("span").hide();
});
$("#show").click(function(){
$("span").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
But if I enclose the following code into a <div> tag and change the <p> into <span> it doesn't work then.
<body>
<div>
<span>If you click on the "Hide" button, I will disappear.</span>
<button id="hide">Hide</button>
<button id="show">Show</button>
</div>
</body>
I want to do similar sort of work, having span inside a div, and if I enter a wrong entry for example age less than 5, it should display a <span> tag saying sorry, this service isn't for the under 5 years. Means i want to control a span tag inside a div tag, whereas a <p> works fine inside a div tag its only span i noticed at the min (maybe more tags).
2 answers
solution1
1 ACCPTED 2019-04-26 15:35:30
In General just "span" or even "div span" would work. BUT if you need to reach specific span inside a div you have to give the div or span a class then reach the span. see the snippet below.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#hide").click(function(){ $(".someclass .wehide").hide(); }); $("#show").click(function(){ $(".someclass .wehide").show(); }); }); </script> </head> <body> <div class="someclass"> <span class="wehide">If you click on the "Hide" button, I will disappear.</span> <br/> <span class="wedont">If you click on the "Hide" button, I WILL NOT disappear.</span> <button id="hide">Hide</button> <button id="show">Show</button> </div> </body> </html>
solution2
0 2019-04-26 15:45:48
It should work
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("div span").hide();
});
$("#show").click(function(){
$("div span").show();
});
});
</script>
<body>
<div>
<span>If you click on the "Hide" button, I will disappear.</span>
</div>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
But a better aproach should be using selector like
<script>
$(document).ready(function(){
$("#hide").click(function(){
$(".myspan").hide();
});
$("#show").click(function(){
$(".myspan").show();
});
});
</script>
<body>
<div>
<span class="myspan">If you click on the "Hide" button, I will disappear.</span>
</div>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
But if for some reason you can't add class selector use some parent reference
<script>
$(document).ready(function(){
$("#hide").click(function(){
$(".myparent span").hide();
});
$("#show").click(function(){
$(".myparent span").show();
});
});
</script>
<body>
<div class="myparent">
<span >If you click on the "Hide" button, I will disappear.</span>
</div>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
According to your needs, you can do something like
<script>
$(document).ready(function(){
$("#hide").click(function(){
$(".erros").hide();
});
$("#show").click(function(){
$(".erros").show();
});
});
</script>
<body>
<div class="form">
<div>
Other content like input
</div>
<div class="erros">
<span >this service isn't for the under 5 years. </span>
</div>
</div>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
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.