0

http://jsfiddle.net/joevallender/QyqYW/1/に基づいてタグシステムを作成していますが、テキストエリアに入力して新しいタグを追加しようとすると正常に動作しますが、任意のタグをクリックすると、以前の新しいテキストが除去される。

HTML

<textarea id="tags"></textarea>
<div id="tagButtons"></div>

Javascript

var tags = [
  'JavaScript',    
  'jQuery',
  'HTML5',    
  'CSS3'
];

var selectedTags = [];

for(var i = 0; i < tags.length; i++) {
  var el = $('<span>').text(tags[i]);
  $('#tagButtons').append(el);
}

$('#tagButtons span').click(function(){
  var val = $(this).text();
  var index = selectedTags.indexOf(val);
  if(index > -1) {
    var removed = selectedTags.splice(index,1); 
    $(this).removeClass('selected');

  } else {
    selectedTags.push(val);
    $(this).addClass('selected');

  }
  $('#tags').val(selectedTags.join(', '));
});
​
4

4 に答える 4

1

あなたの問題はこの行にあります

$('#tags').val(selectedTags.join(', '));

以前のものを上書きしていますtextarea。

編集：

試してみてください: http://jsfiddle.net/QyqYW/92/

var tags = [
  'JavaScript',    
  'jQuery',
  'HTML5',    
  'CSS3',
  'PHP'
],
keys = "";

var selectedTags = [];

for(var i = 0; i < tags.length; i++) {
  var el = $('<span>').text(tags[i]);
  $('#tagButtons').append(el);
}

//changed click event to "on" event.. 
//it seems that click doesn't bind to dynamically added elements
$('#tagButtons').on("click" , "span" , function(){
     //Checks if you've forgot to type "," and then adds your tag
     if(keys != ""){
          selectedTags.push(keys);                                   
          $('#debug').prepend($('<div>').html('Added: ' + keys));
          var newEl = $('<span class="selected">').text(keys);
          $('#tagButtons').append(newEl);
          $('#tags').focus().val(selectedTags.join(', ') + ", ");                                    
          keys = "";
      }

      var val = $(this).text();
      var index = selectedTags.indexOf(val);
      if(index > -1) {
          var removed = selectedTags.splice(index,1); 
          $(this).removeClass('selected');
          $('#debug').prepend($('<div>').html('Removed: ' + removed));
          $('#tags').focus().val(selectedTags.join(', ') + ", ");
      } else {
          selectedTags.push(val);
          $(this).addClass('selected');
          $('#debug').prepend($('<div>').html('Added: ' + val));
          $('#tags').focus().val(selectedTags.join(', ') + ", ");                                    
      }                                                      


});

//adds tag after you type ",".. 
//if you forgot to, look above the first line in the on event
$("#tags").keydown(function(evt){                               
     if(evt.which == 188){
         selectedTags.push(keys);                                   
         $('#debug').prepend($('<div>').html('Added: ' + keys));
         var newEl = $('<span class="selected">').text(keys);
         $('#tagButtons').append(newEl);
         $('#tags').val(selectedTags.join(', '));                                       
         keys = "";
     } else if(evt.which ==8){ 
     //for after adding tag you can't use Backspace to delete it.
     //remove tag from butotns
         if(keys == ""){
         evt.preventDefault();
     } else {
         keys += String.fromCharCode(evt.which).toLowerCase();
     }

});
于 2012-08-23T14:47:38.293 に答える
1

私は元の質問のjsfiddleに取り組み続けました onclick to textarea で複数のタグを追加および削除します

http://jsfiddle.net/joevallender/QyqYW/14/を参照してください

于 2012-08-23T15:05:17.287 に答える
0 
$(this).text();

Aboweは、htmlからDOMに元々レンダリングされた値のみを返します。textareaに入力したものがまだない場合は、('#tags').on('keyup' function () {}); 後でtextareaに含めるために、入力した内容をフックして保存する必要があります。

于 2012-08-23T15:11:09.750 に答える
0

正直に言うと、タグを別の div または入力に入れるだけでよいと思います。とにかく、それらは別々にデータベースに格納する必要があります。

于 2012-08-23T15:19:46.420 に答える