从图像中获取数据属性到单击输入框中

get data attribute from an image into input box on click

本文关键字：单击 输入 数据属性 图像 获取      更新时间：2023-09-26

我有一个包含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()  );
   }
});

其中一个选择器坏了:$('.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()  );

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

Try

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

这只是一个例子。

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