Question

复制粘贴会有很多代码，所以这里有一个fiddle

关注任何输入，按钮出现：

$('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，但它不起作用，它会中断，我在这里尝试失败===＆gt; fiddle

如何将按钮文本转换为焦点中的单个输入？我究竟做错了什么？谢谢。

Answer 1

尝试更改

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

为：

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

<强> Updated Fiddle

Answer 2

试试这个，

$('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（）

Answer 3

试试这个，

Demo

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;
});

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

3 个答案: