防止Javascript在所有div中应用样式更改

我有一些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 class="sortboxes">
<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 class="album-title">All Studio Albums <?PHP print $skull; ?> 230 Variants</div>
<!---|----------------------------------------------------------------------------------->
<div class="gallery">
<div id="all">
<div id="box" class="black x"><?php print $gdclock; ?></div>
<div id="box" class="black x"><?php echo $gdheart; ?></div>
<div id="box" class="blue x"><?php echo $gdblue; ?></div>
<div id="box" class="white opaque og x"><?php echo $gdwhite; ?></div>
<div id="box" class="clear red og splat x"><?php echo $gdclearsplat; ?></div>
<div id="box" class="red black split ogs opaque x"><?php echo $gdredblack; ?></div>
<div id="box" class="red black splat ogs trans x"><?php echo $gdredsplat; ?></div>
<div id="box" class="purple yellow split splat og trans x"><?php echo $gdpurpleyellowsplat; ?></div>
<div id="box" class="green yellow split splat og trans x"><?php echo $gdgreenyellowsplat; ?></div>
<div id="box" class="red og trans x"><?php echo $gdredtrans; ?></div>
</div>
</div>

</body>
</html>

打印:

<?php $gdclock =<<<ALK
<div class="container"> 
<a href="img/12/GD/clock-a.jpg" data-lightbox="main2" data-title="{$inf[gdclock]}"><img src="img/12/GD/tb/clock-a.jpg" class="image" onerror="imgError(this);"></a>
<div class="pressing">First Pressing</div>
<div class="total"><div class="outof">PRESSING OF</div> 1000</div>
<div class="album-colour">Black (Clock Face Labels)
<div class="more-images">
<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" class="image-bar" onerror="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" class="image-bar" onerror="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" class="image-bar" onerror="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" class="image-bar" onerror="this.onerror=null; this.remove();"></a>
</div>
</div>
</div>
ALK;
?>

我现在的问题是，当我点击任何一个复选框a style="display: none;"标记应用于上面代码块中的每个DIV。我希望标签只应用于div与id="box"在我的页面代码。理想情况下，当我点击id="红色"复选框时，所有id="box"类中带有红色的div将会显示，而其他带有id="box"并且类名中的红色不会被隐藏(style="display: none;")。当未选中时，应该删除样式。我只是不知道如何编写Javascript来合并id="box"检查。我希望我解释清楚了。

(我知道在一个页面中多次使用相同的id=是糟糕的html，但这是我能让div服从我的样式规则的唯一方法。)在那个部分使用class似乎不能正常工作，而使用id=来样式化工作)。

我认为你的主要问题是你没有隐藏其他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() } };

你应该NOT每个页面多次使用相同的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>  <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>  <div class="entries">  <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>

有一些事件处理程序逻辑错误和一个打字错误:

相关内容

最新更新

热门标签：