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 或类的情况下增加 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 回答