関数内でonclickが失敗する

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

最後にフォーカスを当てたINPUTにButtonの値を配置しますか？

これは...

$(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>

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

？

値を変更する入力に一時クラスを追加できます。あなたはクリック機能内部のない範囲のクリック機能、わずか2クリックし、グローバル変数を使用することができます

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

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

Answer 4

...

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

Answer 5

最も簡単な解決策：ちょうど最初のクリックのリスナーから、ここで変数を置く：

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