從點擊圖像的數據屬性到輸入框點擊

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

你的一個選擇器壞了： $('.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/

Answer 2

這僅僅是一個例子。隨意適應它到您的代碼。

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

Answer 3

嘗試

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