Это сложная проблема для объяснения, но я постараюсь изо всех сил.
У меня есть контейнер div карт, каждая карта имеет цвет и тип, который вставляется динамически с помощью PHP:
Рядом с этим контейнером div У меня есть виджет уточнения с флажками input для разных цветов и select выпадающий список для разных типов.
В настоящий момент они работают по отдельности - хотя и с каким-то грязным кодом.
Но моя проблема в том, как их сделать. работает правильно в то же время , например, если выбрано 'land', то отображаются только карточки с 'type-land', и в зависимости от того, какие флажки 'color' отмечены, только карточки с обоими типами ' -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;
}
Если кто-то сможет расшифровать это и даже просто направить меня в нужном направлении, это будет огромная помощь.