我有一些基于復選框顯示/隱藏元素的 Javascript 代碼，但它做得有點太好了！我的當前代碼在所有 DIV 中應用了樣式更改，但我希望它僅適用于具有特定 ID 的一個元素，而其他所有內容均不理會。如何更改 Javascript 以執行我想要的操作？這是所有相關代碼：
Javascript：
const clicked = () => {
$("#all div").hide();
$("p#checkboxes > :checkbox").change(() => {
$("#all div").hide();
if ($("#showall").is(":checked")) $("#all div").show();
else {
if ($("#red").is(":checked")) $(".red").show();
if ($("#orange").is(":checked")) $(".orange").show();
if ($("#yellow").is(":checked")) $(".yellow").show();
if ($("#green").is(":checked")) $(".green").show();
if ($("#blue").is(":checked")) $(".blue").show();
if ($("#purple").is(":checked")) $(".purple").show();
if ($("#clear").is(":checked")) $(".clear").show();
if ($("#black").is(":checked")) $(".black").show();
if ($("#white").is(":checked")) $(".white").show();
if ($("#brown").is(":checked")) $(".brown").show();
if ($("#grey").is(":checked")) $(".grey").show();
if ($("#pink").is(":checked")) $(".pink").show();
if ($("#marble").is(":checked")) $(".marble").show();
if ($("#smoke").is(":checked")) $(".smoke").show();
if ($("#trans").is(":checked")) $(".trans").show();
if ($("#opaque").is(":checked")) $(".opaque").show();
if ($("#split").is(":checked")) $(".split").show();
if ($("#double").is(":checked")) $(".double").show();
if ($("#splat").is(":checked")) $(".splat").show();
if ($("#og").is(":checked")) $(".og").show();
}
});
};
頁面代碼：
<?php include '../masterpressing.php' ?>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<?php
ob_start();
require '../r/gd.php';
require '../r/micf.php';
require '../r/fhti.php';
require '../r/gm.php';
require '../r/crimson.php';
require '../r/ai.php';
require '../r/ta.php';
require '../r/msit.php';
require '../r/ittc.php';
require '../r/st.php';
require '../r/remains.php';
require '../r/damnesia.php';
require '../r/pastlive.php';
ob_end_clean();
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>All Albums TEST</title>
</head>
<style>
#checkboxes {
margin: 1px;
}
.x {
display: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<body>
<?php echo $stickybar; ?>
<div >
<p id="checkboxes">
<input type="checkbox" id="showall" onclick="clicked()"> Show All
<input type="checkbox" id="red" onclick="clicked()"> Red
<input type="checkbox" id="orange" onclick="clicked()"> Orange
<input type="checkbox" id="yellow" onclick="clicked()"> Yellow
<input type="checkbox" id="green" onclick="clicked()"> Green
<input type="checkbox" id="blue" onclick="clicked()"> Blue
<input type="checkbox" id="purple" onclick="clicked()"> Purple
<input type="checkbox" id="clear" onclick="clicked()"> Clear
<input type="checkbox" id="black" onclick="clicked()"> Black
<input type="checkbox" id="white" onclick="clicked()"> White
<input type="checkbox" id="brown" onclick="clicked()"> Brown
<input type="checkbox" id="grey" onclick="clicked()"> Grey
<input type="checkbox" id="pink" onclick="clicked()"> Pink
<input type="checkbox" id="marble" onclick="clicked()"> Marble
<input type="checkbox" id="smoke" onclick="clicked()"> Smoke
<input type="checkbox" id="trans" onclick="clicked()"> Trans
<input type="checkbox" id="opaque" onclick="clicked()"> Opaque
<input type="checkbox" id="split" onclick="clicked()"> Split
<input type="checkbox" id="double" onclick="clicked()"> 2xLP
<input type="checkbox" id="splat" onclick="clicked()"> Splatter
<input type="checkbox" id="og" onclick="clicked()"> OG
</p>
</div>
<!---|----------------------------------------------------------------------------------->
<div >All Studio Albums <?PHP print $skull; ?> 230 Variants</div>
<!---|----------------------------------------------------------------------------------->
<div >
<div id="all">
<div id="box" ><?php print $gdclock; ?></div>
<div id="box" ><?php echo $gdheart; ?></div>
<div id="box" ><?php echo $gdblue; ?></div>
<div id="box" ><?php echo $gdwhite; ?></div>
<div id="box" ><?php echo $gdclearsplat; ?></div>
<div id="box" ><?php echo $gdredblack; ?></div>
<div id="box" ><?php echo $gdredsplat; ?></div>
<div id="box" ><?php echo $gdpurpleyellowsplat; ?></div>
<div id="box" ><?php echo $gdgreenyellowsplat; ?></div>
<div id="box" ><?php echo $gdredtrans; ?></div>
</div>
</div>
</body>
</html>
< ?php 列印 $gdclock的代碼塊；? >列印：
<?php $gdclock =<<<ALK
<div >
<a href="img/12/GD/clock-a.jpg" data-lightbox="main2" data-title="{$inf[gdclock]}"><img src="img/12/GD/tb/clock-a.jpg" one rror="imgError(this);"></a>
<div >First Pressing</div>
<div ><div >PRESSING OF</div> 1000</div>
<div >Black (Clock Face Labels)
<div >
<a href="img/12/GD/clock-a.jpg" data-lightbox="main" data-title="{$inf[gdclock]}">
<a href="img/12/GD/clock-b.jpg" data-lightbox="main" data-title="{$inf[gdclock]}"><img src="img/12/GD/tb/clock-b.jpg" one rror="this.onerror=null; this.remove();"></a>
<a href="img/12/GD/clock-cover.jpg" data-lightbox="main" data-title="{$inf[gdclock]}"><img src="img/12/GD/tb/clock-cover.jpg" one rror="this.onerror=null; this.remove();"></a>
<a href="img/12/GD/clock-back.jpg" data-lightbox="main" data-title="{$inf[gdclock]}"><img src="img/12/GD/tb/clock-back.jpg" one rror="this.onerror=null; this.remove();"></a>
<a href="img/12/GD/clock-insert.jpg" data-lightbox="main" data-title="{$inf[gdclock]}"><img src="img/12/GD/tb/clock-insert.jpg" one rror="this.onerror=null; this.remove();"></a>
</div>
</div>
</div>
ALK;
?>
My issue at the moment, is when I click on any of the checkboxes a style="display: none;" tag gets applied to every DIV in my block of code above. I would like the tag to only be applied to the DIVs with an id="box" in my Page Code. Ideally what should happen, is when I click the checkbox with id="red", all of the DIVs with id="box" and with red in their class will be be visible, while all other DIVs with id="box" and no red in their class name will be hidden (style="display: none;"). When unchecked, the style should be removed. I just don't know how to write the Javascript to incorporate the id="box" check. I hope I explained this properly.
（我知道在一個頁面中多次使用相同的 id= 是不好的 html，但這是我可以讓我的 DIV 遵守我的樣式規則的唯一方法。在該部分使用 class 似乎不能正常作業，而使用 id= 來風格化作品）。
uj5u.com熱心網友回復：
我認為您的主要問題是您沒有隱藏其他 div。嘗試類似：
HTML：
<input type="checkbox" id="orange" onclick="clicked()"> test
<input type="checkbox" id="red" onclick="clicked()"> test
<div id="oj" style="display:none;">oj</div>
<div id="r" style="display:none;">r</div>
JS：
clicked = () => {
if($('#orange').is(":checked")) {
$("#oj").show()
} else {
$("#oj").hide()
}
if($('#red').is(":checked")) {
$("#r").show()
} else {
$("#r").hide()
}
};
uj5u.com熱心網友回復：
你應該不是每一頁上使用相同的ID，曾多次。這在語意上是不正確的。它適用于 jQuery，因為這就是使用 jQuery 選擇元素的方式。您應該做的是為<div>要顯示或隱藏的所有元素創建額外的類名。這將允許您安全地選擇應該隱藏哪些 div。
這是一個更清晰的示例，說明如何在沒有重復 ID 或大量條件的情況下制作相同的邏輯。我使用.single-entry了所有<div>我想切換的類名。
// Wait for page to load
$(function () {
console.info('Loaded!');
// Checking for change event of the checkboxes
$('.checkboxes input[type=checkbox]').change(function () {
console.info('Checkbox change detected!');
// Hiding all of the divs we need to hide or show depending on the ckecboxes checked
// We use 'single-entry' class name for all the divs instead of IDs
// IDs should *always* be unique for each element
$('.entries .single-entry').hide();
// Show all entries if 'all' checkbox is set
if ($('.checkboxes input[type=checkbox]#all').is(':checked')) {
console.info('All entries should be shown!');
$('.entries .single-entry').show();
return;
}
// Now loop all checked checkboxes and show related entries
$('.checkboxes input[type=checkbox]:checked').each(function () {
const $checkbox = $(this);
const checkboxElementId = $checkbox.attr('id');
console.log(`Checking for entries with class name .${checkboxElementId}`)
// We already checked 'all' checkbox before, skip it
if (checkboxElementId === 'all') {
console.log("We don't need to check this checkbox!");
return;
}
// Show entry if it found in the list of entries
$('.entries .single-entry.' checkboxElementId).show();
})
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- this is list of checkboxes you listen -->
<div class="checkboxes">
<div>
<label for="all">
<input type="checkbox" id="all" checked>
<span>Show all</span>
</label>
</div>
<div>
<label for="red">
<input type="checkbox" id="red">
<span>Red</span>
</label>
</div>
<div>
<label for="blue">
<input type="checkbox" id="blue">
<span>Blue</span>
</label>
</div>
<div>
<label for="green">
<input type="checkbox" id="green">
<span>Green</span>
</label>
</div>
</div>
<hr>
<!--
list of entries you displaying or hiding
it's better if you will contain them in some fixed class name
-->
<div class="entries">
<!--
all of the entries should use single class which will indicate
that this div should be displayed or hidden
-->
<div class="single-entry red">This is red entry</div>
<div class="single-entry green">This is green entry</div>
<div class="single-entry blue">This is blue entry</div>
<div class="single-entry green blue">This is green and blue entry</div>
<div class="single-entry blue red">This is blue red entry</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/334085.html
標籤：javascript 查询 css