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事件附加到按钮上，然后传递引用e-g onclick =“ DoSomething（this）”，现在在函数DoSomething（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>

将按钮文本填充到输入字段

2 个答案: