有没有更简单的方法来使用 jQuery 显示和隐藏许多 div？
[英]Is there a simpler way to show and hide many divs using jQuery?
问题描述
i want to show and hide divs using jQuery by other simple method.
我想通过其他简单的方法使用 jQuery 显示和隐藏 div。 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.此代码仅用于测试，它有很多要隐藏和显示的 div，所以当我添加所有 div 时，它会变得很长。
code html代码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 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 个解决方案
解决方案1
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.最好使用 class 而不是 id 来显示/隐藏显示/隐藏 div，您现在将它们分组到可见块中，因此在 div 之间共享类名效果更好。
Id is used more when you need to get exactly one element.当您只需要获取一个元素时，会更多地使用 Id。 Also having id like "divt" is meaningless as that naming is not intuitive.也有像“divt”这样的 id 是没有意义的，因为命名不直观。 It will be better to update ids to meaningful names too.最好也将 id 更新为有意义的名称。
<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>
解决方案2
1 已采纳 2020-09-03 18:47:54
All your DIVs are also in the form-group class.您所有的 DIV 也都在form-group类中。 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();
}
});
解决方案3
1 2020-09-03 18:48:33
Two thoughts:两个想法：
1: jQuery can combine multiple selectors using commas: 1：jQuery可以使用逗号组合多个选择器：
$("#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: 2：您可以使用类来表示逻辑组，例如“cat1”代表类别 1，“cat2”代表类别 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();
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.