У меня есть 3 флажка с 8 различными комбинациями и результатами.
- Если вы не выберете флажки, то дивы не будут отображаться.
- При выборе одного флажка отображается цветной div.
Например; установив красный флажок. - При установке двух флажков отображается div color1 + color2. Но не показывает ни один из одноцветных div.
Например; при установке красного и зеленого флажков отображается красно-зеленый div. Но гарантирует, что и красный, и зеленый блоки div скрыты, поэтому отображается только один блок div. - При установке всех флажков отображается div rgb. И не показывает никаких других div.
Это работает. Мне было интересно, можно ли это написать более эффективно?
$('input[type="checkbox"]').click(function () {
$('.box').hide();
if ($('#red').is(':checked')) $('.red.box').show();
if ($('#green').is(':checked')) $('.green.box').show();
if ($('#blue').is(':checked')) $('.blue.box').show();
if ($('#red').is(':checked') && $('#green').is(':checked')) $('.redgreen.box').show() && $('.red.box, .green.box').hide();
if ($('#red').is(':checked') && $('#blue').is(':checked')) $('.redblue.box').show() && $('.red.box, .blue.box').hide();
if ($('#green').is(':checked') && $('#blue').is(':checked')) $('.greenblue.box').show() && $('.green.box, .blue.box').hide();
if ($('#red').is(':checked') && $('#green').is(':checked') && $('#blue').is(':checked')) $('.rgb.box').show() && $('.red.box, .green.box, .greenblue, .redblue, .redgreen.box, .blue.box').hide();
});
.box {
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.redblue .redgreen .greenblue {
border: 1px solid black;
}
.rgb {
border: 1px dashed black;
}
.red {
background: #ff0000;
}
.green {
background: #00ff00;
}
.blue {
background: #0000ff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>
<input type="checkbox" id="red" name="colorCheckbox" value="red">red</label>
<label>
<input type="checkbox" id="green" name="colorCheckbox" value="green">green</label>
<label>
<input type="checkbox" id="blue" name="colorCheckbox" value="blue">blue</label>
</div>
<div class="red box"><strong>red</strong></div>
<div class="green box"><strong>green</strong></div>
<div class="blue box"><strong>blue</strong></div>
<div class="redgreen box"><strong>red green</strong></div>
<div class="redblue box"><strong>red blue</strong></div>
<div class="greenblue box"><strong>green blue</strong></div>
<div class="rgb box"><strong>rgb</strong></div>
1 ответ
Несколько примечаний к вашему коду:
- Если вам не нужна поддержка очень старых или нестандартных браузеров, и учитывая, что ваш проект не сильно зависит от jQuery, ванильный JavaScript может выполнять ту же работу без накладных расходов jQuery.
- При каждом щелчке флажка все цветные блоки div запрашиваются снова и снова (
jQuery('.box')
), в котором нет необходимости, поскольку в DOM нет изменений. - Все флажки запрашиваются несколько раз, а не один раз.
- Структура «если-то» довольно громоздка: если установлен #red, отобразить .red.box. Затем, если также отмечен #green, скройте .red.box и покажите .redgreen.box. Затем, если установлен флажок #blue, скройте .redgreen.box и покажите .rbg.box. Один из способов улучшить эту часть — сначала точно определить, какой из флажков следует установить, и отображать только этот флажок.
- Лично я бы использовал комбинации
.red
/.green
/.blue
классы вместо того, чтобы помещать разные классы для каждой комбинации (например,.box.red.green.blue
вместо.box.rgb
). Таким образом, каждый флажок соответствует определенному классу div.
Вот мой подход к проблеме / домашнему заданию / упражнению, который касается большинства вышеперечисленных замечаний (без изменений CSS / HTML; все еще используется jQuery):
const RED = 1;
const GREEN = 2;
const BLUE = 4;
const DIV_CLASSES_MAP = [null, '.red', '.green', '.redgreen', '.blue', '.redblue', '.greenblue', '.rgb'];
const DIVS = $('.box');
const RED_TICK = $('#red');
const GREEN_TICK = $('#green');
const BLUE_TICK = $('#blue');
let activeDiv = DIVS.filter(':visible');
$('input[name="colorCheckbox"]').on('click', onCheckboxChange);
function onCheckboxChange() {
const redBit = RED_TICK.is(':checked') ? RED : 0;
const greenBit = GREEN_TICK.is(':checked') ? GREEN : 0;
const blueBit = BLUE_TICK.is(':checked') ? BLUE : 0;
const mask = redBit + greenBit + blueBit;
const activeClass = DIV_CLASSES_MAP[mask];
activeDiv.hide();
activeDiv = DIVS.filter(activeClass).show();
}
Добро пожаловать в Code Review! Вы предложили альтернативное решение, но не просмотрели код. «Каждый ответ должен содержать хотя бы один проницательное наблюдение про код в вопросе. Ответы, которые просто предлагают альтернативное решение без объяснения или обоснования, не являются действительными ответами Code Review и могут быть удалены. «Пожалуйста, прочтите статью Как написать хороший ответ?», Чтобы узнать, как улучшить свой ответ.
— Сетрис
Мне не нужна поддержка старых или нестандартных браузеров, поэтому я рассмотрю альтернативу javascript. Ваше решение использует меньше запросов для флажков? Спасибо.
— Лоуис