Javascript 标记系统-获取元素在数组中的位置并替换它

首先，我是jQuery新手，我的英语不是最好的

我尝试创建一个标签系统，比如Stackoverflow，我已经找到了一些有用的代码。为了更好地理解，这里是当前的系统

HTML:

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

$（文档）.ready（函数（）{
标签=[]；
$（“.taggingSystem”）.keyup（函数（e）{
if（$（“.taggingSystem”）.val（）.substring（0，1）==“”）{
$（'.taggingSystem'）.val（''）；
返回false；
}
//获取输入字段的值
var值=$（'.taggingSystem'）.val（）.replace（/\s/g，“”）；
//如果用户正在按退格键
如果（例如which===8&&value===“”）{
var text=$（'.targetLeft.tagHolder:last child.tagValue'）.text（）；
$（'.targetLeft.tagHolder:last child'）.remove（）；
$（this.val）（文本）；
}
//如果用户正在按空格键
如果（例如，which==32&&value！=“”）{
$（.targetLeft”）.append（“”+value+X'）；
tags.push（这个值）；
此值为“”；
}
});
$（文档）.on（'click'，'targetLeft.tagHolder'，函数（）{
var clickedValue=$（this）.prev（'.tagHolder'）.find（'.tagValue'）.text（）；
标签拼接（点击值，1）；
var值=$（'.taggingSystem'）.val（）；
if（$（“.taggingSystem”）.val（）.substring（0，1）！=“”）{
$（“.targetRight”）.prepend（“”+value+X'）；
}
var text=$（this.find（'.tagValue'）.text（）；
var following=$（this.nextAll（）；
下面是remove（）；
$（“.targetRight”）。前置（以下）；
$（this.remove（）；
$（'.taggingSystem'）.val（文本）；
});
$（文档）.on（'click'，'.targetRight.tagHolder'，函数（）{
var值=$（'.taggingSystem'）.val（）；
if（$（“.taggingSystem”）.val（）.substring（0，1）！=“”）{
$（.targetLeft”）.append（“”+value+X'）；
}
var text=$（this.find（'.tagValue'）.text（）；
var following=Array.prototype.reverse.call（$（this.prevAll（））；
下面是remove（）；
$（“.targetLeft”）。追加（如下）；
$（this.remove（）；
$（'.taggingSystem'）.val（文本）；
});
$（“.holder”）。单击（函数（e）{
如果（！$（e.target）.is（'.test'））{
var值=$（'.taggingSystem'）.val（）；
if（$（“.taggingSystem”）.val（）.substring（0，1）！=“”）{
$（.targetLeft”）.append（“”+value+X'）；
}
$（'.taggingSystem'）.val（''）；
变量following=$（'.targetRight'）.find（'.tagHolder'）；
$（“.targetLeft”）。追加（如下）；
}
});
});

问题是，如果我单击一个标记在其中写入一些其他文本，数据将显示在数组的末尾。但是我希望数据在数组中的相同位置被替换。如您所见，我还尝试使用

splice（）

。但我不知道如何将新数据推送到被删除文本所在的位置。你知道吗

---

为了证明概念，我做了这把小提琴

它只是一个快速而肮脏的代码，但也许它可以帮助你。（顺便说一句，这是我自己的代码，我拿出了一个未完成的项目）

---

你不能做

tags[tags.indexOf（clickedValue）]=文本？或者类似的东西。。您正在数组中替换文本的clickedValue为什么不使用插件？您知道有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);
        }
    });
});

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

}