Question

我有3个输入和3个按钮。我想通过点击按钮来设置一个值。第一套一切正常。当我设置下一个输入时，它会改变我所有输入的值。

我该如何解决？

$(function() {
  $("input").on("click", function () {
  var here = $(this);
    
    $("div").on("click", "button", function() {
      here.val(this.value);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text">
<input type="text">
<input type="text">

<div>
  <button value="a">a</button>
  <button value="b">b</button>
  <button value="c">c</button>
</div>

Answer 1

您无法在点击功能中定位点击功能，只需使用两次点击和全局变量...

$(function() {
var here;
  $("input").on("click", function () {
     here = $(this);       
  });
  $("div").on("click", "button", function() {
      here.val(this.value);
  });
});

Answer 2

你想要这个吗？

$(function() {
  $("input").on("click", function () {
  var here = $(this);
    
    $("div").on("click", "button", function() {
      here.val(this.value+here.val());
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text">
<input type="text">
<input type="text">

<div>
  <button value="a">a</button>
  <button value="b">b</button>
  <button value="c">c</button>
</div>

Answer 3

为什么使用外部功能？

您可以将一个临时类添加到要更改其值的输入中。

    $("input").on("click", function () {
       $("input").removeClass('addToThis');
       $(this).addClass('addToThis');
    });

    $("div").on("click", "button", function() {
      $(".addToThis").val(this.text());
    });

Answer 4

最简单的解决方案：只需将here变量放在第一个单击列表器中：

$(function() {
  var here;
  $("input").on("click", function () {
    here  = $(this);
    $("div").on("click", "button", function() {
      here.val(this.value);
    });
  });
});

Answer 5

您是否想要将Button的值放入最后一个聚焦的INPUT中。

这可能会有所帮助..

$(function() {
  var lastFocus;
  $('body').on('focus','input', function () {
    lastFocus = this;
  });
  $("div").on("click", "button", function() {
    $(lastFocus).val(this.value);    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text">
<input type="text">
<input type="text">

<div>
  <button value="a">a</button>
  <button value="b">b</button>
  <button value="c">c</button>
</div>

内部函数onclick失败

5 个答案: