javascript - 使用 jQuery 向 DOM 删除/添加 div 时选择下拉菜单和复选框冲突
问题描述
这是一个很难解释的问题，但我会尽我所能。
我有一个div卡片容器，每张卡片都有一个颜色和一个使用 PHP 动态插入的类型：
在这个容器旁边，div我有一个“优化”小部件，其中input包含不同颜色的复选框和select不同类型的下拉菜单。
目前，我让他们两个都单独工作——尽管有一些混乱的代码。
但我的问题是如何使它们同时正确运行，例如，如果选择了“地”，则仅显示具有“类型地”的卡，并且根据选中的“颜色”复选框，仅检查同时具有两者的卡显示“type-land”和相应的颜色。
颜色复选框按预期工作：
键入下拉菜单按预期工作：
两者在某处相互冲突（请注意，当仅选择“地”时，“蓝色瞬间”也会显示）：
PHP 细化小部件（复选框和下拉菜单）：
<div class="cat-nav-container">
<div class="cat-nav-main ui-widget-content" id="draggable">
<h3>Categories</h3>
<p>Refine your <span>search</span>:</p>
<label for="checkbox">Colours<span>:</span></label>
<div class="checkboxes">
<div class="checkbox white">
<label for="checkbox">White<span>:</span></label>
<input
type="checkbox"
name="white-checkbox"
id="white"
value="white"
checked
/>
</div>
<div class="checkbox blue">
<label for="checkbox">Blue<span>:</span></label>
<input
type="checkbox"
name="blue-checkbox"
id="blue"
value="blue"
checked
/>
</div>
<div class="checkbox black">
<label for="checkbox">Black<span>:</span></label>
<input
type="checkbox"
name="black-checkbox"
id="black"
value="black"
checked
/>
</div>
<div class="checkbox red">
<label for="checkbox">Red<span>:</span></label>
<input
type="checkbox"
name="red-checkbox"
id="red"
value="red"
checked
/>
</div>
<div class="checkbox green">
<label for="checkbox">Green<span>:</span></label>
<input
type="checkbox"
name="green-checkbox"
id="green"
value="green"
checked
/>
</div>
<div class="checkbox colourless">
<label for="checkbox">Colourless<span>:</span></label>
<input
type="checkbox"
name="colourless-checkbox"
id="colourless"
value="colourless"
checked
/>
</div>
<div class="checkbox multicoloured">
<label for="checkbox">Multicoloured<span>:</span></label>
<input
type="checkbox"
name="Multicoloured-checkbox"
id="multicoloured"
value="multi-coloured"
checked
/>
</div>
</div>
<label for="types">Card Types<span>:</span></label>
<div class="select">
<select id="type">
<option name="-" id="-" value="-">-</option>
<option name="land" id="lands" value="land">Lands</option>
<option name="creature" id="creatures" value="creature">Creatures</option>
<option name="planeswalker" id="planeswalkers" value="planeswalker">Planeswalkers</option>
<option name="instant" id="instants" value="instant">Instants</option>
<option name="sorcery" id="sorceries" value="sorcery">Sorceries</option>
<option name="enchantment" id="enchantments" value="enchantment">Enchantments</option>
<option name="artifact" id="artifacts" value="artifact">Artifacts</option>
<option name="token" id="tokens" value="token">Tokens</option>
</select>
<p>↓</p>
</div>
</div>
</div>
PHP卡容器：
<div class="card-container" id="card-container">
<?php foreach($cards as $card): ?>
<div class="card colour-<?php echo $card['colour']; ?> type-<?php echo $card['card_type']; ?>" name="<?php echo $card['card_type']; ?>">
<div class="front">
<img src="../img/card.png" alt="magic the gathering playing card" />
<div class="description">
<div class="name-price">
<p>
<?php if(strlen($card['name']) < 10): ?>
<?php echo $card['name']; ?>
<?php else: ?>
<?php echo substr($card['name'], 0, 6) . '...'; ?>
<?php endif; ?>
</p>
<p><?php echo $card['colour'] . $card['card_type']; ?></p>
<p>
<?php echo $card['price'] >= 1 ? '£' : ''; ?>
<?php echo $card['price']; ?>
<?php echo $card['price'] < 1 ? 'p' : ''; ?>
</p>
</div>
<div class="stock">
<p><?php echo $card['stock'] > 0 ? 'In' : 'Out'; ?></p>
<p><?php echo $card['stock'] > 0 ? 'Stock' : 'of Stock'; ?></p>
</div>
</div>
<button id="add-cart-btn"
<?php if($card['stock'] === '0'): ?>
class="card-btn-disabled" disabled
<?php else: ?> class="card-btn" <?php endif; ?>>
Add to cart
</button>
</div>
<div class="back">
<p>
<?php echo '<span>Name</span>:<br>' . $card['name']; ?>
<?php if(strlen($card['description']) < 135): ?>
<?php echo '<br><br><span>Description</span>:<br>' . $card['description']; ?>
<?php else: ?>
<?php echo '<br><br><span>Description</span>:<br>' . substr($card['description'], 0, 135) . '...' . '<button id="more-btn">More<span>...</span></button>'; ?>
<?php endif; ?>
</p>
</div>
</div>
<?php endforeach; ?>
</div>
jQuery（曾经写过的最混乱的代码，但它可以工作）：
$(document).ready(function() {
// card colours
const redCard = $('*.colour-red');
const blueCard = $('*.colour-blue');
const blackCard = $('*.colour-black');
const whiteCard = $('*.colour-white');
const greenCard = $('*.colour-green');
const colourlessCard = $('*.colour-colourless');
const multicolouredCard = $('*.colour-multicoloured');
// card types
const landCard = $('*.type-land');
const creatureCard = $('*.type-creature');
const planeswalkerCard = $('*.type-planeswalker');
const instantCard = $('*.type-instant');
const sorceryCard = $('*.type-sorcery');
const enchantmentCard = $('*.type-enchantment');
const artifactCard = $('*.type-artifact');
const tokenCard = $('*.type-token');
const allCards = $('*.card');
function refineColour(colourCheckbox, colourCard, type) {
// value of the card-type dropdown
let select = $('#type').val();
$(colourCheckbox).click(() => {
if (!($(colourCheckbox).is(':checked')) && select !== type) {
$(colourCard).addClass('card-hide').removeClass('card-display');
} else if ($(colourCheckbox).is(':checked') && select === type) {
$(colourCard).removeClass('card-hide').addClass('card-display');
}
});
}
function refineType(type, cardType, colourCheckbox) {
// value of the card-type dropdown
let select = $('#type').val();
if (select === type && $(colourCheckbox).is(':checked')) {
$(cardType).addClass('card-display').removeClass('card-hide');
$(`.card[name!='${type}']`).removeClass('card-display').addClass('card-hide');
$(colourCheckbox).prop('checked', true);
} else if (select === '-') {
$(allCards).removeClass('card-hide');
$('#blue').prop('checked', true);
$('#red').prop('checked', true);
$('#black').prop('checked', true);
$('#white').prop('checked', true);
$('#green').prop('checked', true);
$('#colourless').prop('checked', true);
$('#multicoloured').prop('checked', true);
}
}
refineColour('#red', redCard, 'land');
refineColour('#blue', blueCard, 'land');
refineColour('#black', blackCard, 'land');
refineColour('#green', greenCard, 'land');
refineColour('#white', whiteCard, 'land');
refineColour('#colourless', colourlessCard, 'land');
refineColour('#multicoloured', multicolouredCard, 'land');
refineColour('#red', redCard, 'enchantment');
refineColour('#blue', blueCard, 'enchantment');
refineColour('#black', blackCard, 'enchantment');
refineColour('#green', greenCard, 'enchantment');
refineColour('#white', whiteCard, 'enchantment');
refineColour('#colourless', colourlessCard, 'enchantment');
refineColour('#multicoloured', multicolouredCard, 'enchantment');
refineColour('#red', redCard, 'sorcery');
refineColour('#blue', blueCard, 'sorcery');
refineColour('#black', blackCard, 'sorcery');
refineColour('#green', greenCard, 'sorcery');
refineColour('#white', whiteCard, 'sorcery');
refineColour('#colourless', colourlessCard, 'sorcery');
refineColour('#multicoloured', multicolouredCard, 'sorcery');
refineColour('#red', redCard, 'artifact');
refineColour('#blue', blueCard, 'artifact');
refineColour('#black', blackCard, 'artifact');
refineColour('#green', greenCard, 'artifact');
refineColour('#white', whiteCard, 'artifact');
refineColour('#colourless', colourlessCard, 'artifact');
refineColour('#multicoloured', multicolouredCard, 'artifact');
refineColour('#red', redCard, 'token');
refineColour('#blue', blueCard, 'token');
refineColour('#black', blackCard, 'token');
refineColour('#green', greenCard, 'token');
refineColour('#white', whiteCard, 'token');
refineColour('#colourless', colourlessCard, 'token');
refineColour('#multicoloured', multicolouredCard, 'token');
refineColour('#red', redCard, 'instant');
refineColour('#blue', blueCard, 'instant');
refineColour('#black', blackCard, 'instant');
refineColour('#green', greenCard, 'instant');
refineColour('#white', whiteCard, 'instant');
refineColour('#colourless', colourlessCard, 'instant');
refineColour('#multicoloured', multicolouredCard, 'instant');
refineColour('#red', redCard, 'planeswalker');
refineColour('#blue', blueCard, 'planeswalker');
refineColour('#black', blackCard, 'planeswalker');
refineColour('#green', greenCard, 'planeswalker');
refineColour('#white', whiteCard, 'planeswalker');
refineColour('#colourless', colourlessCard, 'planeswalker');
refineColour('#multicoloured', multicolouredCard, 'planeswalker');
refineColour('#red', redCard, 'creature');
refineColour('#blue', blueCard, 'creature');
refineColour('#black', blackCard, 'creature');
refineColour('#green', greenCard, 'creature');
refineColour('#white', whiteCard, 'creature');
refineColour('#colourless', colourlessCard, 'creature');
refineColour('#multicoloured', multicolouredCard, 'creature');
refineColour('#red', redCard, '-');
refineColour('#blue', blueCard, '-');
refineColour('#black', blackCard, '-');
refineColour('#green', greenCard, '-');
refineColour('#white', whiteCard, '-');
refineColour('#colourless', colourlessCard, '-');
refineColour('#multicoloured', multicolouredCard, '-');
$('#type').change(() => {
refineType('land', landCard, '#blue');
refineType('creature', creatureCard, '#blue');
refineType('artifact', artifactCard, '#blue');
refineType('sorcery', sorceryCard, '#blue');
refineType('enchantment', enchantmentCard, '#blue');
refineType('token', tokenCard, '#blue');
refineType('instant', instantCard, '#blue');
refineType('planeswalker', planeswalkerCard, '#blue');
refineType('land', landCard, '#red');
refineType('creature', creatureCard, '#red');
refineType('artifact', artifactCard, '#red');
refineType('sorcery', sorceryCard, '#red');
refineType('enchantment', enchantmentCard, '#red');
refineType('token', tokenCard, '#red');
refineType('instant', instantCard, '#red');
refineType('planeswalker', planeswalkerCard, '#red');
refineType('land', landCard, '#black');
refineType('creature', creatureCard, '#black');
refineType('artifact', artifactCard, '#black');
refineType('sorcery', sorceryCard, '#black');
refineType('enchantment', enchantmentCard, '#black');
refineType('token', tokenCard, '#black');
refineType('instant', instantCard, '#black');
refineType('planeswalker', planeswalkerCard, '#black');
refineType('land', landCard, '#green');
refineType('creature', creatureCard, '#green');
refineType('artifact', artifactCard, '#green');
refineType('sorcery', sorceryCard, '#green');
refineType('enchantment', enchantmentCard, '#green');
refineType('token', tokenCard, '#green');
refineType('instant', instantCard, '#green');
refineType('planeswalker', planeswalkerCard, '#green');
refineType('land', landCard, '#white');
refineType('creature', creatureCard, '#white');
refineType('artifact', artifactCard, '#white');
refineType('sorcery', sorceryCard, '#white');
refineType('enchantment', enchantmentCard, '#white');
refineType('token', tokenCard, '#white');
refineType('instant', instantCard, '#white');
refineType('planeswalker', planeswalkerCard, '#white');
refineType('land', landCard, '#colourless');
refineType('creature', creatureCard, '#colourless');
refineType('artifact', artifactCard, '#colourless');
refineType('sorcery', sorceryCard, '#colourless');
refineType('enchantment', enchantmentCard, '#colourless');
refineType('token', tokenCard, '#colourless');
refineType('instant', instantCard, '#colourless');
refineType('planeswalker', planeswalkerCard, '#colourless');
refineType('land', landCard, '#multicoloured');
refineType('creature', creatureCard, '#multicoloured');
refineType('artifact', artifactCard, '#multicoloured');
refineType('sorcery', sorceryCard, '#multicoloured');
refineType('enchantment', enchantmentCard, '#multicoloured');
refineType('token', tokenCard, '#multicoloured');
refineType('instant', instantCard, '#multicoloured');
refineType('planeswalker', planeswalkerCard, '#multicoloured');
});
});
CSS：
.card {
display: block;
width: 150px;
height: 280px;
margin: 10px;
}
.card-hide {
display: none;
}
.card-display {
display: block;
}
如果有人能破译这一点，甚至只是指出我正确的方向，那将是一个巨大的帮助。
解决方案
推荐阅读
- html - 固定 HTML 和 CSS 中图像的大小
- python - 我不断收到错误 sqlite3.InterfaceError: Error binding parameter 0 - 可能是不受支持的类型
- r - 控制抖动宽度以允许类别重叠 ggplot2
- c# - 是否可以链接计时器和 Window_Loaded 事件？
- regex - 如何在 PowerShell 中进行条件正则表达式替换
- python - Python guizero：文本框 = [文本框]
- html - 如何使用 HTML、CSS、Bootratrap 在引导卡内显示扩展面板
- go - 如何避免在 buf generate 上复制供应商 proto 依赖项
- docker - 连接到本地卷与网络卷时 Docker hyperV 的差异 [Windows 容器]
- openlayers - 将表单版本 4 升级到 6 后，Unicode 点不再在 openlayers 地图中呈现？