javascript - 输入类型隐藏从 javascript 中的 foreach 传递相同的值

Question

我有一个 foreach 代码，它打印图像，然后将图像 ID 存储在隐藏表单字段中。我想在用户单击特定图像时获取特定图像 ID。但它返回 foreach image id 的第一个值。抱歉英语不好。请有人帮我解决这个问题。

<div id="gallery_09" >
    <?php foreach ($hair['hair_color_media'] as $key => $row){?>
   <input type = "hidden" name = "hair_color_slug" value = "<?=$row->hair_color_slug?>">
   <a href="#" class="elevatezoom-gallery" data-toggle="tooltip" title="<?=$row->hair_color?>" data-update="" data-image="<?=base_url('assets/img/products/large/'.$row->media_images);?>" data-zoom-image="<?=base_url('assets/img/products/large/'.$row->media_images);?>" onclick = "getPrice();">
      <img data-toggle="tooltip" title="<?=$row->hair_color?>" src="<?=base_url('assets/img/products/pin/'.$row->media_images);?>" width="50" style = "border-radius: 50%;">
  </a>
<?php }?>
  </div>
<input type = "text" readonly="" id ="color" name = "color"/>

<script type="text/javascript">
        function getPrice()
        {
            var color = $('input:hidden[name=hair_color_slug]').val();

            document.getElementById('color').value = color;
        }
    </script>

Answer 1

在 getPrice 函数中传递处理程序“this”关键字来获取触发事件的当前元素。

onclick = "getPrice(this);

单击时将获取 clicks 元素之前的隐藏值并放入颜色字段中。

function getPrice(getprice)
{
    var color = $(getprice).prev().val();

    document.getElementById('color').value = color;
}