Заполнить текст кнопки в поле ввода

Question

Мне нравится заполнять текст из кнопки в поле ввода. Но я не знаю, почему я не могу найти поле ввода.

$(document).ready(function() {
  $(".delivervalue").click(
    function() {
      var tttt = $(this)
        .prev('input')
        .text($(this).text());
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-inline">
  <div class="form-group mb-2">
    <input type="text" class="form-control deliveramount" placeholder="insert amount to deliver">
  </div>
  <button type="button" class="btn btn-primary delivervalue">1000</button>
  <button type="button" class="btn btn-primary delivervalue">3000</button>
  <button type="button" class="btn btn-primary delivervalue">5000</button>
</form>

Answer 1

Поскольку .prev() цель, непосредственно предшествующая брату и элементу <INPUT>, не удовлетворяет условию в контексте <BUTTON>, таким образом, приведенный выше код не работал.

Используйте .closest() для нацеливания на общий родительский элемент, затем используйте .find() для нацеливания на элемент <INPUT> и используйте .val(value) для установки значения.

$(this)
    .closest('.form-inline')
    .find('.deliveramount')
    .val($(this).text())`

$(document).ready(function() {
  $(".delivervalue").click(function() {
    $(this)
      .closest('.form-inline')
      .find('.deliveramount')
      .val($(this).text());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-inline">
  <div class="form-group mb-2">
    <input type="text" class="form-control deliveramount" placeholder="insert amount to deliver">
  </div>
  <button type="button" class="btn btn-primary delivervalue">1000</button>
  <button type="button" class="btn btn-primary delivervalue">3000</button>
  <button type="button" class="btn btn-primary delivervalue">5000</button>
</form>

Answer 2

На самом деле $ (this) ссылается на объект javascript. Вам нужно либо присоединить событие onClick к кнопкам и передать ссылку, например, onclick = "DoSomething (this)", теперь для функции DoSomething (reference) {}, используя «reference», мы можем использовать его как $ (reference) .prev ('div'). find ('input'). text ($ (this) .text ());

Полный пример:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-inline">
  <div class="form-group mb-2">
    <input type="text" class="form-control deliveramount" placeholder="insert amount to deliver">
  </div>
  <button type="button" class="btn btn-primary delivervalue" onclick="DoSomething(this)">1000</button>
  <button type="button" class="btn btn-primary delivervalue">3000</button>
  <button type="button" class="btn btn-primary delivervalue">5000</button>
</form>

<script>
function DoSomething(reference)
{
$(reference).prev('div').find('input').val($(reference).text());
}
</script>