2 различных решения (все JS по сравнению с большинством CSS)
- Сохранение основных функций в JS
- Использование CSS для основных функций
Я вижу, чего вы здесь пытаетесь достичь, и вижу несколько sh способов сделать это. Оба решения ниже позволяют вашему коду динамически l oop проходить через любое количество элементов коробки - нет необходимости писать отдельный блок для каждого элемента.
Первый пример ниже смоделирован более похожим на ваш, на основе в вашем коде, но переписан, чтобы работать более динамично. Второе решение значительно упрощает ситуацию, перемещая все сценарии инициализации в CSS, оставляя JS ответственным только за логическое переключение, если вам нужно сделать какие-либо переключения состояния в реальном времени.
# 1. Сохранение основных функций в JS
Это решение изменяет исходный код, чтобы динамически считывать значения для любого количества значений, а затем перебирать их. Чтобы выполнить повторное мигание в JS, я бы предложил использовать setInterval. Вам также необходимо переместить это за пределы остальной части кода при использовании al oop, иначе вы получите конфликт между итератором l oop и временем setInterval и setTimeout. Подробнее об этом здесь . Вы можете увидеть рабочий пример ниже:
function blink(el) {
if (el.style) {
setInterval(function() {
el.style.visibility = "visible";
setTimeout(function() {
el.style.visibility = "hidden";
}, 450);
}, 900);
}
}
const $boxes = document.querySelectorAll('[id^="blink"]');
for (const $box of $boxes) {
var boxId = $box.id.match(/\d+/)[0]; // store the ID #
if (document.getElementById('$box' + boxId + 'value')) {
var boxValue = parseInt(document.getElementById('$box' + boxId + 'value').innerHTML);
if (boxValue) {
$box.style.backgroundColor = '#ff0000';
blink($box);
} else {
$box.style.backgroundColor = '#098700';
}
}
}
.grid-container {
display: grid;
grid-gap: 50px;
grid-template-columns: auto auto auto;
background-color: grey;
padding: 10px;
}
.grid-item {
background-color: #098700;
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 50px;
font-size: 30px;
text-align: center;
}
.values {
display: none;
}
<div class="grid-container">
<div class="grid-item" id="blink1">A</div>
<div class="grid-item" id="blink2">B</div>
<div class="grid-item" id="blink3">C</div>
</div>
<div class="values">
<div id="$box1value">1</div>
<div id="$box2value">0</div>
<div id="$box3value">1</div>
</div>
CodePen: https://codepen.io/brandonmcconnell/pen/ecc954bad5552962574c080631700932
# 2. Использование CSS для основных функций
Это решение перемещает весь ваш код JS (цвет и анимацию) в CSS, перемещая двоичный логический переключатель 0/1 в атрибуты данных в сетке - элементы сами по себе, а не отдельные элементы, а затем запускают любые логические переключатели в этих контейнерах, используя JS, нацеливая их на другой атрибут, такой как ID, или, как я использовал в моем примере ниже, другой атрибут данных я назвал data-blink-id. Это мое рекомендуемое решение, если вы можете переместить все эти logi c в CSS. Будет намного проще поддерживать и манипулировать им в реальном времени, поскольку все, что требуется для изменения состояния, - это простой логический переключатель.
.grid-container {
display: grid;
grid-gap: 50px;
grid-template-columns: auto auto auto;
background-color: grey;
padding: 10px;
}
.grid-item {
background-color: #098700;
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 50px;
font-size: 30px;
text-align: center;
}
.grid-item[data-blink-status="1"] {
background-color: #f00;
animation: blink 900ms linear infinite forwards;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
<div class="grid-container">
<div class="grid-item" data-blink-id="1" data-blink-status="1">A</div>
<div class="grid-item" data-blink-id="2" data-blink-status="0">B</div>
<div class="grid-item" data-blink-id="3" data-blink-status="1">C</div>
</div>
CodePen: https://codepen.io/brandonmcconnell/pen/5b4f3090b3590902b11d50af43361758
Для запуска двоичного логического переключателя на элементе (включить / выключить), используйте команду JS ниже. Я прокомментировал это в приведенном выше примере CodePen. Снимите комментирование этой строки JS, чтобы активировать ее, и включите блок с помощью data-blink-id=2
document.querySelector('[data-blink-id="2"]').setAttribute('data-blink-status', 1);