Блог

я хочу выбрать идентификатор цвета активного цвета, например, предположим, что у меня есть три цвета: желтый, синий, красный. По умолчанию первый цвет-желтый, поэтому я получаю идентификатор желтого цвета, используя «скрытый тип ввода». но когда мы нажимаем на синий цвет, то активный цвет будет синим, поэтому мне нужен идентификатор синего цвета, а если я нажму на красный, то идентификатор красного цвета. мне нужен идентификатор активного цвета, чтобы получить идентификатор этого активного цвета. вот мой код

  <p class="product-color"> Color :                     
  <?php foreach($avlcolers as $colors){ ?>
   <button type="button" title="<?php echo $colors['color_name']; ?>" id="btn2" onclick="variationchange(<?php echo $colors['color_id'] ; ?>)" style="background:<?php echo $colors['color_value']; ?>;padding:12px;border: 1px solid #ccc;border-radius: 50%;border:1px solid #ccc; color: white; width: 40px; height:40px;" value="5" class="color-btn"></button>
   <?php    } ?>                            
 </p> 
 

когда я пытаюсь получить color_id, например, используя код ниже в коде выше

  <input type="hidden" id="color_id" value="<?php echo $colors['color_id'] ; ?>" >
 

я получаю color_id только первого цвета.
Есть ли какой-либо способ получить идентификатор цвета текущего цвета.

Используйте атрибут jQuery data-id, как показано на рисунке:

 <p class="product-color"> Color :                     
  <?php foreach($avlcolers as $colors){ ?>
   <button type="button" title="<?php echo $colors['color_name']; ?>" class="btn-colors" data-id="<?php echo $colors['color_id'];?>" style="background:<?php echo $colors['color_value']; ?>;padding:12px;border: 1px solid #ccc;border-radius: 50%;border:1px solid #ccc; color: white; width: 40px; height:40px;" value="5" class="color-btn"></button>
   <?php    } ?>                            
 </p> 

 

Затем добавьте событие нажатия кнопки для цветных кнопок(в зависимости от класса).

 <script>
  $('.btn-colors').click(function(){
       var colorID = (this).attr('data-id');
       // then set the value of colo id field to the above id
       ("#color_id").val(colorID);
  });
</script>