遍历DOM并将值插入<input/>

Question

复制粘贴将是大量的代码，下面是一个小提琴

将焦点放在任何输入上，按钮将出现：

$('input').focus(function () {
        var $this = $(this);
       $this.closest('p').after($( ".specialCharactersWrap" ));

    });

然后单击按钮，将按钮的文本插入到输入中：

 $('.specialCharactersWrap button').click(function() {
         var $this = $(this);
    var value = $(this).text();
    var input = $('.FillIn .FillInInput');
    input.val(input.val() + value);
    return false;
});

问题:它将所有输入插入到中。我需要它插入到上的一个单一的(这是重点)。尝试用closest()遍历DOM，但是它不起作用，它失败了，我在这里的尝试失败了，===> 小提琴

如何将按钮文本集中到一个单一的输入中？我做错了什么？谢谢。

Answer 1

尝尝这个,

演示

var $that = this // here my change
       $('input').focus(function () {
        var $this = $(this);
           $that = $(this);// here my change
       $this.closest('p').after($( ".specialCharactersWrap" ));
       // alert('test');

    });
     $('.specialCharactersWrap button').click(function() {
         var $this = $(this);
    var value = $(this).text();
    var input = $that;// here my change
    input.val(input.val() + value);
    return false;
});

Answer 2

试着改变

var input = $('.FillIn .FillInInput');

至：

var input = $(this).closest('.specialCharactersWrap').prev().find('.FillInInput');

更新Fiddle

Answer 3

尝尝这个,

$('input').focus(function () {
        var $this = $(this);
       $this.closest('p').after($( ".specialCharactersWrap" ));
        $('.FillInInput').closest('p').removeClass('focussed');
        $this.closest('p').addClass('focussed');
       // alert('test');

    });
     $('.specialCharactersWrap button').click(function() {
         var $this = $(this);
    var value = $(this).text();
    var input = $('.FillIn').find('.focussed').find('.FillInInput');

    input.val(input.val() + value);
    return false;
});

我在输入焦点上添加了一个类，然后单击按钮使用它，或者您也可以使用.prev()