Question

我的图片包含data-keyword属性。任何人都可以告诉我如何获取其字符串并在我点击图像时在输入字段中显示它？我可以将文字链接.special_field_link设置为有效，但不能显示图片.image_keyword。 （FIDDLE）以下代码不起作用：

HTML

<input id="a_input_id" type="text">
<a href="" class="special_field_link">@ABC<a>
<a href="" class="special_field_link">@DEF<a>
<img src="image.jpg" class="image_keyword" data-keyword="Hello" alt="pic">

JS：

$('.special_field_link,.image_keyword').click(function (e)   {
   e.preventDefault();
   if($(this).is('.image_keyword')){
      var keyword = $(this).data('keyword');
      $('#a_input_id').val(  ( $('#a_input_id').val()+" "+$(this).keyword.html() ).trim()  );      
   } 
   else {         
      $('#a_input_id').val(  ( $('#a_input_id').val()+" "+$(this).html() ).trim()  );
   }
});

Answer 1

尝试

$('.image_keyword').click(function (e)   {
    $('#a_input_id').val($('.image_keyword').data('keyword'));
});

Answer 2

你的一个选择器坏了： $('.special_field_link,image_keyword') .错过了.image_keyword

中的.data('keyword')

您正在使用.html()正确访问数据属性，但您无需拨打var keyword = $(this).data('keyword'); $('#a_input_id').val( ( $('#a_input_id').val()+" "+keyword ).trim() );：

{{1}}

小提琴： http://fiddle.jshell.net/s8nUh/178/

Answer 3

这只是一个例子。随意使其适应您的代码。

image.addEventListener("click", function() {
    var data = image.getAttribute("data-keyword");
    input.value = data;
})

单击时将图像中的数据属性输入到输入框中

3 个答案: