Is there a simpler way to show and hide many divs using jQuery?
Question
i want to show and hide divs using jQuery by other simple method. This code is just for testing and it has a lot of divs to hide and show, so it will get very long when I add all the divs.
code html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="form-group">
<label>Categories <span class="text-hightlight">*</span></label>
<select class="form-control" name="category_id" id="category_id">
<option>select</option>
<option value="1">choose1</option>
<option value="2">choose2</option>
</select>
</div>
<div class=" col-md-12" id="divt">
<div class="form-group col-md-4">
<label for="titre">type</label>
</div>
<div class="form-check form-check-inline col-md-4">
<input type="radio" class="form-check-input" value="1" name="type" checked="checked">
<label class="form-check-label" for="o">offer</label>
</div>
<div class="form-check form-check-inline col-md-4">
<input type="radio" class="form-check-input" value="2" name="type">
<label class="form-check-label" for="d">request</label>
</div>
</div>
<div class="form-group" id="divb">
<label>business <span class="text-hightlight">*</span></label>
<input type="text" name="entreprise" id="entreprise" class="form-control"/>
</div>
<div class="form-group" id="divp">
<label>Poste <span class="text-hightlight">*</span></label>
<select class="form-control" name="poste">
<option></option>
<option>Plien temps</option>
<option>Mi-temps</option>
</select>
</div>
<div class="form-group" id="divn">
<label>Nom Piece <span class="text-hightlight">*</span></label>
<input type="text" name="piece" class="form-control"/>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
jQuery
<script>
$(document).on('change', '#category_id', function() {
let category_id = $(this).val();
if(category_id === "1"){
$("#dive").hide();
$("#divn").hide();
$("#divt").hide();
$("#divp").show();
$("#divb").show();
}else if(category_id === "2"){
$("#dive").show();
$("#divn").show();
$("#divt").show();
$("#divp").hide();
$("#divb").hide();
}else{
$("#dive").show();
$("#divn").show();
$("#divt").show();
$("#divp").show();
$("#divb").show();
}
});
</script>
3 answers
solution1
2 2020-09-03 18:47:47
It would be better you use class instead of id to show/hide Showing/Hiding divs, you are grouping those into visible blocks now so having class names shared between divs work the better.
Id is used more when you need to get exactly one element. Also having id like "divt" is meaningless as that naming is not intuitive. It will be better to update ids to meaningful names too.
<div class="container">
...
<div class=" col-md-12 group-1" id="divt">...
</div>
<div class="form-group group-2" id="divb">...
</div>
<div class="form-group group-2" id="divp">...
</div>
<div class="form-group group-1" id="divn">...
</div>
</div>
JQuery
<script>
$(document).on('change', '#category_id', function() {
let category_id = $(this).val();
if(category_id === "1"){
$(".group-1").hide();
$(".group-2").show();
}else if(category_id === "2"){
$(".group-1").show();
$(".group-2").hide();
}else{
$(".group-1").show();
$(".group-2").show();
}
});
</script>
solution2
1 ACCPTED 2020-09-03 18:47:54
All your DIVs are also in the form-group class. So you could first hide all of them, then just show the ones specific to the selection.
$(document).on('change', '#category_id', function() {
let category_id = $(this).val();
$(".form-group").hide();
if (category_id === "1") {
$("#divp,#divb").show();
} else if (category_id === "2") {
$("#dive,#divn,#divt").show();
} else {
$(".form-group").show();
}
});
solution3
1 2020-09-03 18:48:33
Two thoughts:
1: jQuery can combine multiple selectors using commas:
$("#dive,#divn,#divt").show();
2: You could use classes to represent logical groups, say "cat1" for those which are shown with category 1 and "cat2" for those with category 2:
<div id="dive" class="category cat2"></div>
<div id="divn" class="category cat2"></div>
<div id="divp" class="category cat1"></div>
<div id="divb" class="category cat1"></div>
Then your code is
$(document).on("change", "#category_id", function() {
let category_id = $(this).val();
if (category_id == 1) {
$('.category').hide();
$('.cat1').show();
} else if (category_id == 2) {
$('.category').hide();
$('.cat2').show();
} else {
$('.category').show();
}
});
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.