設置不同的輸入值，當點擊按鈕

Question

我有3個按鈕和一個輸入，我想當我點擊其中一個按鈕的值或輸入來源根據按鈕改變，例如當我點擊它通過蘋果的第一個按鈕，當我點擊按鈕兩通過橙色，等等。 我該怎麼做？這裏是我到目前爲止已經試過：

$(document).ready(function() { 
 
    $('button').click(function() { 
 
     $('input').val('value'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button">Button 1</button> 
 
<button type="button">Button 2</button> 
 
<button type="button">Button 3</button> 
 

 
<input type="text" value="">

Answer 1

你甚至可以上的按鈕使用id秒。然而，在這個例子中，我覺得它像這樣每個按鈕使用data-attribute更語義：

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    $('input').val($(this).data('attribute')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" data-attribute='apple'>Button 1</button> 
 
<button type="button" data-attribute='orange'>Button 2</button> 
 
<button type="button" data-attribute='banana'>Button 3</button> 
 

 
<input type="text" value="">

Answer 2

添加自定義屬性按鈕元素ANS傳遞給它的點擊事件 HTML：

<button type="button" data-fruit="apple">Button 1</button> 
<button type="button" data-fruit="banana">Button 2</button> 
<button type="button" data-fruit="orange">Button 3</button> 

JS：

$(document).ready(function() { 
    $('button').click(function() { 
    var fruit = $(this).attr('data-fruit'); 
    $('input').val(fruit); 
    }); 
}); 

Answer 3

你甚至可以用簡單的JavaScript做到這一點....

function insertValue(btn) { 
 
    document.getElementById("input").value = btn; 
 
}

<button onClick='insertValue("Orange")'>Orange</button> 
 
<button onClick='insertValue("banana")'>banana</button> 
 
<button onClick='insertValue("Apple")'>Apple</button> 
 

 
<input type=text id="input" />