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 に答える