Question

我得到了带有标签按钮的输入字段

<input id="demooutput" type="text" size="15" value="My Text" name="demo" />
<span class="demooutput">
    <a href="#" class="button orange"> A</a>
    <a href="#" class="button orange"> B</a>
    <a href="#" class="button orange"> C</a>
    <a href="#" class="button orange"> D</a>
    <a href="#" class="button orange"> E</a>        
</span>

使用这个jQuery代码我将值添加到输入

$('.demooutput a').click(function(){
    $('#demooutput').val($(this).html());
    return false;
});

但我按下按钮

清除现有价值

我想将按钮的值另外添加到输入

中的现有值

我想要它的例子

My Text A (by click on A)
My Text A B (by click on A and B)
My Text B C E (by click on B, C and E)
and so on..

在 JSFIDDLE

上查看演示

Answer 1

$（'＃demooutput'）。val（$（'＃demooutput'）。val（）+ $（this）.html（））;

Answer 2

试试这个：

$('.demooutput a').click(function(){
    var values = $('#demooutput').val().split(' ');
    values.push($(this).html());
    $('#demooutput').val(values.join(' '));
    return false;
});

DEMO

或者只是简单地说：

$('.demooutput a').click(function(){
    $('#demooutput').val($('#demooutput').val() + ' '+ $(this).html());
    return false;
});

DEMO

在某些情况下，建议采用第一种方法，因为它清楚地区分了逻辑。例如：如果您需要切换文本（单击“A”然后再次单击“A”以隐藏“A”，只需从数组中删除“A”并加入）

Answer 3

这不是经过测试的代码，但您正在寻找类似的东西。

$('.demooutput a').click(function(e){
    e.preventDefault(); // jQuery for return false
    var $demooutput = $('#demooutput'); // cache selector for performance
    $demooutput.val($demooutput.val()+' '+$(this).html());
});

在click-jQuery上为输入字段的现有值添加附加值

3 个答案: