Question

我有3个按钮和一个输入，我希望当我点击其中一个按钮时，此输入的值或来源会根据按钮进行更改，例如当我点击它通过苹果的第一个按钮时，我点击按钮2它通过橙色等。我怎样才能做到这一点？这是我到目前为止所尝试的：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您甚至可以在按钮上使用id。但是，在这个例子中，我认为在每个按钮上使用data-attribute更加语义，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

添加自定义属性按钮元素并将其传递给您的点击事件 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也可以做到这一点....

＆＃13;

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

＆＃13;

<button   onClick='insertValue("Orange")'>Orange</button>
<button  onClick='insertValue("banana")'>banana</button>
<button  onClick='insertValue("Apple")'>Apple</button>

<input type=text id="input" />

＆＃13;

点击按钮

3 个答案: