jquery - 使用 jquery 使用图像的 attr 设置隐藏的输入值

Question

比如说我有一些图片

<img class="selectImage" src="..." value="John" />
<img class="selectImage" src="..." value="Sally" />
<img class="selectImage" src="..." value="Joe" />

单击图像时，我想要的值

 <input type="hidden" name="First Name" />

成为“value=”的值

Answer 1

尝试

jQuery(function($){
    var hinput = $('input[name="First Name"]');
    $('.selectImage').click(function(){
        hinput.val($(this).attr('value'))
    })
})

演示：小提琴

Answer 2

$(function() {
    $('img.selectImage').click(function(e) {
        e.preventDefault();
        var myVal = $(this).attr("value");
        $('input:hidden[name="First Name"]').val(myVal);
    });
 });

Answer 3

我建议使用data-*属性将数据与元素相关联，而不是使用value属性，正如其他人所说的那样，它不是有效的标记。

将您的 html 更改为如下格式：

<img class="selectImage" src="..." data-firstname="John" />

然后，您可以data-*使用 JQuery 访问该属性，如下所示：

var x = $("selector").data("firstname");//get
$("selector").data("firstname", x);//set

您的要求的完整代码如下：

$('.selectImage').click(function(){
    var firstName = $(this).data("firstname");
    $('input[name="First Name"]').val(firstName);
});

这是一个工作示例