0

Jqueryを使用して製品コンフィギュレーターを作成しています。ユーザーは、製品にカスタムテキスト行を追加できます。つまり、たとえば、カスタムテキストを含む4つのテキスト行を作成できます。

これらの行を追加および削除するための最良の方法を知る必要があります。現在、行を追加するための次のコードがあります...

    //Add Text Button
$('a#addText').live('click', function(event) {
    event.preventDefault();

    //Scroll up the text editor
    $('.textOptions').slideUp();
    $('#customText').val('');

    //count how many items are in the ul textList
    var textItems = $('ul#textList li').size();
    var nextNumber = textItems + 1;

    if(textItems <= 5) {

        //Change input to reflect current text being changed
        $('input#currentTextNumber').val(nextNumber);

        //Append a UL Item to the textList
        $('ul#textList').append('<li id="textItem'+nextNumber+'">Text Line. +$5.00 <a class="deleteTextItem" href="'+nextNumber+'">Delete</a></li>');

        //Scroll down the text editor
        $('.textOptions').slideDown();

    }else {

        alert('you can have a maximum of 6 textual inputs!');   

    }
});

私はおそらくこれを最善の方法で行っているわけではありませんが、基本的には空のULリストから始めます。したがって、[テキスト行の追加]をクリックすると、順序付けされていないリストに含まれるリスト要素の数がわかり、それに値1が追加され、IDがTextItem1またはTextItem2、あるいは現在の番号の新しいリスト要素が配置されます。

私が遭遇している問題は、アイテムの削除をクリックすると、すべてを台無しにすることです。これは、アイテムを再度追加すると、すべての番号が正しくないためです。削除したい数値より上のすべての数値がそれらの値から1を減算し、以下のすべての数値が同じままであるという、ある種のロジックを作成することを考えました。しかし、私はこれについて間違った方向に進んでいると思います。

これらのテキスト行を追加および削除する最も簡単な方法に関する提案をいただければ幸いです。

4

2 に答える 2

2

ランダムなものを追加および削除する状況でIDまたはクラスをインクリメントしようとすると、通常、それが価値があるよりも頭痛の種になります。

アイテムの単一クラスに変更します

<li class="textItem">

削除は次のようになります

$('#textList').on('click','.textItem a', function(){/* note that live() is deprecated*/
      $(this).parent().remove();
      $('input#currentTextNumber').val( $('#textList li').length );/* note that size() is deprecated*/
      return false;
});

このプロセスのいずれかでサーバーで他の動的データストレージまたはAJAXが実行されている場合は、要素に共通のクラスを使用することと組み合わせて、それらを構成する簡単な方法があります。

于 2012-10-30T22:34:44.743 に答える
0

これは役立つはずです

編集：明らかに、参照は私が考慮に入れるべきものです。コードは機能していましたが、必要な参照はありませんでした。さて、これを使用してください...

var currentIdx = $('ul#textList li').size();

$('a#addText').click(function(event) { 
    event.preventDefault();

    //Scroll up the text editor
    $('.textOptions').slideUp();

    //count how many items are in the ul textList
    var nextNumber = currentIdx++;

    if($('ul#textList li').size() <= 5) {

        //Change input to reflect current text being changed
        $('input#currentTextNumber').val(nextNumber);

        var newLi = $('<li class="textItem' + nextNumber + '">' + 
            $('#customText').val() +
            '<a class="deleteTextItem" href="#">Delete</a></li>');

        newLi.find('a.deleteTextItem').click(function() {
            $(this).parent('li').remove();
        })

        //Append a UL Item to the textList
        $('ul#textList').append(newLi);

        $('#customText').val('');

        //Scroll down the text editor
        $('.textOptions').slideDown();

    } else {
        alert('you can have a maximum of 6 textual inputs!');   
    }
});​

これがフィドルです。

于 2012-10-30T22:17:21.957 に答える