如何使用JQuery基于图像内部的值设置隐藏字段值

Question

我有几个这样的图像：

<div class="attribImg"><img data-id="9" src="images/attributes/black.jpg" alt="Black"></div>
<div class="attribImg"><img data-id="3" src="images/attributes/red.jpg" alt="Black"></div>
<div class="attribImg"><img data-id="7" src="images/attributes/green.jpg" alt="Black"></div>
<div class="attribImg"><img data-id="8" src="images/attributes/blue.jpg" alt="Black"></div>

和一个类似的隐藏数据字段：

<input type="hidden" id="id[1]" name="id[1]" value="1">

我正在寻找正确的方法，根据图像中data-id的设置来更改单击图像时隐藏输入的值。

Answer 1

可能与以下内容类似：

$("input:image").each(function(){
    $(this).click(function(){
        $("#id[1]").val($(this).attr('data-id'));
    });
});

Answer 2

使用jquery，可以这样实现：

   $('.attribImg').on('click', function () {
    var value = $(this).children('img').data('id');
    alert(value)
    $('#id').val(value);
});

更新：不会设置该值的原因是您在保留的id名称中使用了[]。您只能按此顺序使用字母（Aa-Zz）、数字（0-9）、连字符（-）、下划线（_）或冒号（：）。这里有一个很好的解释

工作示例