有沒有更簡單的方法來使用 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.