0

首先，我是 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/

4

1 回答 1

0

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

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

}
于 2013-09-27T13:03:17.353 回答