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

使用jquery，可以这样实现：

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

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

<强> WORKING EXAMPLE

Answer 2

类似下面的东西可能：

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

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

2 个答案: