Javascript 单击按钮时设置不同的输入值

我有3个按钮和一个输入，我想当我点击其中一个按钮时，这个输入的值或来源会根据按钮而改变，比如当我点击第一个按钮时，它经过苹果，当我点击第二个按钮时，它经过橙色，等等。。 我该怎么做？以下是我迄今为止所尝试的：

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（'input'）.val（'value'）；
});
});

按钮1
按钮2
按钮3
您甚至可以在按钮上使用
id
s。但是，在本例中，我认为在每个按钮上使用
数据属性
更具语义，如下所示：


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（'input'）.val（$（this.data（'attribute'））；
});
});

按钮1
按钮2
按钮3
您甚至可以在按钮上使用
id
s。但是，在本例中，我认为在每个按钮上使用
数据属性
更具语义，如下所示：


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（'input'）.val（$（this.data（'attribute'））；
});
});

按钮1
按钮2
按钮3
添加自定义属性按钮元素并将其传递给单击事件
HTML:

添加自定义属性按钮元素并将其传递给单击事件
HTML:

即使使用简单的javascript，您也可以做到这一点


函数插入值（btn）{
document.getElementById（“输入”）.value=btn；
}
橙色
香蕉
苹果
即使使用简单的javascript也可以做到这一点


函数插入值（btn）{
document.getElementById（“输入”）.value=btn；
}
橙色
香蕉
苹果
Add custom attribute button元素并传递它Add custom attribute button元素并传递它仅供参考在获取
data
属性时，您应该使用
data（）
，因为它更快并保存DOM访问。仅供参考您应该使用
data（）
在获取
数据时
属性，因为它更快，并且可以保存DOM访问。
<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>

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