如何选择可用颜色 ID 列表的活动颜色 ID答案

【问题标题】：How to pick active color id of list of color id's available如何选择可用颜色 ID 列表的活动颜色 ID
【发布时间】：2021-09-30 08:59:36
【问题描述】：

我想选择活动颜色的颜色 id，比如假设我有黄色、蓝色、红色三种颜色。默认情况下，第一种颜色是黄色，所以我通过使用“隐藏输入类型”获得黄色的颜色 id。但是当我们点击蓝色时，活动颜色将为蓝色，所以我需要蓝色的颜色 id，如果我点击红色，则颜色 id 为红色。我需要一个活动颜色标识符来获取该活动 coloe 的 id。这是我的代码

 <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。有什么方法可以获取当前颜色的 color_id。

【问题讨论】：

标签： javascript php jquery ajax codeigniter

【解决方案1】：

使用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>

【讨论】：

这不起作用。实际上，我们必须首先识别活动按钮。就像默认情况下第一个颜色（黄色）是活动的，所以我们得到第一个颜色 id，然后我们点击一个颜色，假设红色，那么活动颜色是红色，我们应该获得红色的颜色 id，等等多种颜色。您的代码只会给出第一个颜色 ID。无论如何感谢先生的努力。