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

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="">