標記系統 - 獲取元素在陣列中的位置並將其替換

Question

首先，我是jQuery中的新成員，我的英語不是最好的。

我嘗試創建一個像Stackoverflow這樣的標記系統，並且我已經找到了一些有用的代碼。爲了更好地理解這裏是當前的系統。

HTML：

<div class="holder"> 
    <span class="test targetLeft" style="background: red;"></span> 
    <input class="test taggingSystem" type="text" /> 
    <span class="test targetRight"></span> 
</div> 

的jQuery：

$(document).ready(function() { 

    tags = []; 

    $(".taggingSystem").keyup(function (e) { 
     if ($(".taggingSystem").val().substring(0, 1) == " ") { 
      $('.taggingSystem').val(''); 
      return false; 
     } 
     // GET THE VALUE OF THE INPUT FIELD 
     var value = $('.taggingSystem').val().replace(/\s/g,""); 
     // IF USER IS HITTING THE BACKSPACE KEY 
     if (e.which === 8 && value === "") { 
      var text = $('.targetLeft .tagHolder:last-child .tagValue').text(); 
      $('.targetLeft .tagHolder:last-child').remove(); 
      $(this).val(text); 
     } 
     // IF USER IS HITTING THE SPACE KEY 
     if (e.which === 32 && value != "") { 
      $(".targetLeft").append('<span class="test tagHolder"><span class="test tagValue">' + value + '</span><span class="test cross">X</span></span>'); 
      tags.push(this.value); 
      this.value = ""; 
     } 
    }); 

    $(document).on('click','.targetLeft .tagHolder',function() { 
     var clickedValue = $(this).prev('.tagHolder').find('.tagValue').text(); 
     tags.splice(clickedValue, 1); 
     var value = $('.taggingSystem').val(); 
     if ($(".taggingSystem").val().substring(0, 1) != "") { 
      $(".targetRight").prepend('<span class="test tagHolder"><span class="test tagValue">' + value + '</span><span class="test cross">X</span></span>'); 
     } 
     var text = $(this).find('.tagValue').text(); 
     var following = $(this).nextAll(); 
     following.remove(); 
     $(".targetRight").prepend(following); 
     $(this).remove(); 
     $('.taggingSystem').val(text);  
    }); 

    $(document).on('click','.targetRight .tagHolder',function() { 
     var value = $('.taggingSystem').val(); 
     if ($(".taggingSystem").val().substring(0, 1) != "") { 
      $(".targetLeft").append('<span class="test tagHolder"><span class="test tagValue">' + value + '</span><span class="test cross">X</span></span>'); 
     } 
     var text = $(this).find('.tagValue').text(); 
     var following = Array.prototype.reverse.call($(this).prevAll()); 
     following.remove(); 
     $(".targetLeft").append(following); 
     $(this).remove(); 
     $('.taggingSystem').val(text); 
    }); 

    $(".holder").click(function (e) { 
     if(!$(e.target).is('.test')) { 
      var value = $('.taggingSystem').val(); 
      if ($(".taggingSystem").val().substring(0, 1) != "") { 
       $(".targetLeft").append('<span class="test tagHolder"><span class="test tagValue">' + value + '</span><span class="test cross">X</span></span>'); 
      } 
      $('.taggingSystem').val(''); 
      var following = $('.targetRight').find('.tagHolder'); 
      $(".targetLeft").append(following); 
     } 
    }); 
}); 

的問題是，如果我在標籤上點擊寫在它的一些其他文字，數據出現在數組的結尾。但我希望數據將被替換在陣列中的相同位置。正如你所看到的，我也試圖與splice()合作。但我不知道如何將新數據推到被刪除文本所在的位置。你有什麼想法嗎？

http://jsfiddle.net/Wky2Z/12/

Answer 1

的概念證明，我做了這個小提琴。

http://jsfiddle.net/kasperfish/3ADeM/

它只是快速和骯髒的代碼，但也許它可以幫助你。 （順便說一下，這是我自己的代碼，我拿出了一個未完成的項目）

var mycolorarray= []; 

function handleColorSelection(value){ 
    //alert(value); 
    value=value.replace(/\s+/g, ' '); 
    //loop trough all colors in the container and get color name with html() 
    $('#allcolors .sel_cont').each(function(i, obj) { 
     colordiv=$(this);//this is the color div dom element 
     colorname=colordiv.html(); 
     //compare the input value with the color name 
     if(colorname.match("^"+value) && value!=''){ 
      colordiv.fadeIn(); 
      if(colorname==value){selectColor(colordiv);} 
     }else{ 
      colordiv.fadeOut() 
      } 

    }); 

} 
function selectColor(colordiv){ 
    //alert('select'); 
    colordiv.removeAttr('onclick').unbind('click').click(function(){deselectColor($(this));}).insertBefore($('#inputcolor')); 
    $('#inputcolor').val(''); 
    $('#allcolors .sel_cont').fadeOut(); 
    mycolorarray.push(colordiv.attr('id').substr(4)); 
    $('#petcolors').val(JSON.stringify(mycolorarray)); 

} 
function deselectColor(obj){ 
    //alert('deselect'); 
    obj.removeAttr('onclick').unbind('click').click(function(){selectColor($(this));}).hide().appendTo($('#allcolors')); 

    //remove id from mycolorarray and update petcolors input with json 
    index = mycolorarray.indexOf(obj.attr('id').substr(4)); 
    mycolorarray.splice(index, 1); 
    if(mycolorarray.length >0){ 
    $('#petcolors').val(JSON.stringify(mycolorarray)); 
    }else{$('#petcolors').val('')} 
} 
function unfocusActions(obj){ 
    obj.val(''); 
    //handleColorSelection(''); 

}