Question

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

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

但第一个问题是当我点击另一个带有“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(";"));
    });
});

DEMO

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

$(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(";"));
    });
});

DEMO

Answer 2

尝试保留价值的历史记录。

Fiddle Demo

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

    }); 
});

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

2 个答案: