Сменить цвет кнопок js

176

27 июля 2018, 10:30

Есть массив с данными, там есть кнопки, мне нужно чтобы при нажатие на конкретную кнопку менялся цвет только этой кнопки.

 <?php foreach ($products as $product) { ?>
 <button type="button" style="width: 90px; height: 90px" class="btn btn-xs btn-success" onclick="StatusProduct(this)" >
 <i class="fa fa-minus-circle" style="font-size: 50px"></i>
 <input type="hidden" name="product_id[]" value="<?php echo $product['product_id']?>
 </button>
<?php } ?>

я нашел пример как поминать цвет одной кнопки

 <input onclick="change(this)" type="submit" value="Перевести" title="Перевести">
 var color = 'green'; 
function change(identifier) {
    identifier.style.background = color;
}

А как это сделать в массиве ?

Answer 1

document.querySelector('.parent').addEventListener('click',e=>{   
  if (e.target.classList.contains('btn')) { 
    [...e.target.parentElement.children].map(el=>el.style.background=""); 
    e.target.style.background="red"; 
  }  
})

<div class="parent"> 
  <button class="btn">one</button> 
  <button class="btn">two</button> 
  <button class="btn">three</button> 
  <button class="btn">four</button> 
  <button class="btn">five</button> 
</div>