Как добавить и удалить текст с ввода

Question

Хорошо, когда я нажимаю кнопку с классом «allas», я хочу, чтобы jquery добавлял текст кнопки к моему вводу с идентификатором «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); 

    }); 
});