jquery - 如何从输入中追加和删除文本

Question

好的，当我单击一个带有“allas”类的按钮时，我希望 jquery 将按钮的文本附加到我的输入中，id 为“inputbox”。到目前为止一切正常：

$(document).ready(function() {
    $('.allas').click(function() {
        $('#inputbox').val($(this).text());
    });
});

但第一个问题是我的代码总是替换输入 val，当我点击另一个带有“allas”类的按钮时。我希望 jquery 添加由 ; 分隔的值

并且“我认为更困难的部分”我想要一个撤消功能，当用户再次单击他尚未按下的按钮时，应该从输入中删除按钮的值！

我希望你能理解我？感谢帮助！

http://jsfiddle.net/WcCTe/

Answer 1

一个简单的方法：

 var inputValues = [];
 $(document).ready(function() {
    $('.allas').click(function() {
        var inputValue = $(this).text();
        var index = inputValues.indexOf(inputValue);
        if (index  >= 0){
           inputValues.splice(index,1);
        }
        else{
           inputValues.push(inputValue); 
        }
        $('#inputbox').val(inputValues.join(";"));
    });
});

演示

如果您不想存储全局变量，请尝试以下操作：

$(document).ready(function() {
    $('.allas').click(function() {
        var inputValues = [];
        if ($('#inputbox').val() != "")
        {
            inputValues = $('#inputbox').val().split(";");
        }
        var inputValue = $(this).text();
        var index = inputValues.indexOf(inputValue);
        if (index  >= 0){
           inputValues.splice(index,1);
        }
        else{
           inputValues.push(inputValue); 
        }
        $('#inputbox').val(inputValues.join(";"));
    });
});

演示

Answer 2

尝试保留价值的历史。

小提琴演示

HTML

<input type="text" id="inputbox" value=""><br>
<button class="allas">one</button>
<button class="allas">two</button>
<button class="allas">three</button>
<button class="undo">undo</button>

文件准备就绪

$(function() 
{
    var history = [''];

    $('.allas').click(function() 
    {
        var $this = $(this);
        var $inputbox = $('#inputbox');
        var value = $inputbox.val() + $(this).text();
        history.push(value) 
        $inputbox.val(value);
    });

    $('.undo').click(function()
    {
        history.pop();
        var lastIndex = history.length - 1;
        var $inputbox = $('#inputbox');
        var value = history[lastIndex];
        $inputbox.val(value);

    }); 
});