將數據屬性轉換爲字段值

Question

我很努力通過點擊鏈接將data-屬性添加到表單的輸入中。如果我點擊另一個鏈接，那麼之前的值應該用與這個鏈接相關的新值替換。

這是我的鏈接代碼：

<div id="links"> 
<h3>Links</h3> 
<a href="#1" data-url="http://apple.com" data-name="My url">Link 1</a> 
<a href="#2" data-url="http://bbc.co.uk" data-name="My second url">Link 2</a> 
<a href="#3" data-url="http://google.com" data-name="My third url">Link 3</a> 
</div> 

這是我格式的代碼：

<div id="form"> 
<h3>Form</h3> 
<input type="text" size="25" value=""> 
<input type="hidden" name="" value=""> 
</div> 

所以我有隻有一種形式，爲所有鏈接（也許超過100個總共）。

請看到我的jsfiddle：http://jsfiddle.net/jtzrjrs2/1/

我真的很感謝你的幫助。

Answer 1

您當前的代碼，有註釋：

$('#links a').click(function(){ // when I click an 'a' element within the element with ID 'links' 
    $(this).find('input').val(); //find any inputs contained within the clicked item, and get the value of the input 
}); 

你可能想更多的東西是這樣的：

$('#links a').click(function(){       // when I click an 'a' element within the element with ID 'links' 
    $('#form').find('input').val($(this).data('name')); // find any inputs within the elmeent with id 'form', and set its value to be the 'data-name' attribute of the item I clicked 
}); 

JSFIDDLE

更新

要設置在單獨的值投入，噸他的解決辦法應該工作：

$('#links a').click(function(){          // when I click an 'a' element within element with ID 'links' 
    $('#form').find('input[type="text"]').val($(this).data('name')); // for the element with id 'form', find all inputs of type 'text', and set the value to the 'data-name' attribute of the clicked element 
    $('#form').find('input[type="hidden"]').val($(this).data('url')); // for the element with id 'form', find all inputs of type 'hidden', and set the value to the 'data-url' attribute of the clicked element 
}); 

JSFIDDLE