有没有更简单的方法来使用 jQuery 显示和隐藏许多 div？
[英]Is there a simpler way to show and hide many divs using jQuery?
问题描述
我想通过其他简单的方法使用 jQuery 显示和隐藏 div。 此代码仅用于测试，它有很多要隐藏和显示的 div，所以当我添加所有 div 时，它会变得很长。
代码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 个解决方案
解决方案1
2 2020-09-03 18:47:47
最好使用 class 而不是 id 来显示/隐藏显示/隐藏 div，您现在将它们分组到可见块中，因此在 div 之间共享类名效果更好。
当您只需要获取一个元素时，会更多地使用 Id。 也有像“divt”这样的 id 是没有意义的，因为命名不直观。 最好也将 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>
查询
<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
您所有的 DIV 也都在form-group类中。 所以你可以先隐藏所有这些，然后只显示特定于选择的那些。
$(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
两个想法：
1：jQuery可以使用逗号组合多个选择器：
$("#dive,#divn,#divt").show();
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>
那么你的代码是
$(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();
}
});
使用jQuery显示和隐藏div？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.