Question

我有动态文本字段，允许用户添加/删除。首先，该字段将显示数据库中的记录。

$count = 1;
foreach($parts as $part)
{               
    echo "<input type=\"hidden\" class=\"countNumber\" value=\"".$count."\">";
    echo $count++;
}

这是我的jQuery动态文本字段。
JSFIDDLE ：DEMO

用户点击+后，我需要增加号码。例如，如果我的数据库包含5条记录，那么计数将为1,2,3,4,5，然后一旦用户点击动态文本字段添加按钮，该数字将从之前的计数继续，它将变为6,7,8... 。同样，如果用户点击-按钮，计数将再次重新排序。

但我不知道该怎么做。非常感谢任何帮助/指导

Answer 1

我想你想得到最后一个输入数字;

如果您将使用classname countNumber

您可以使用count = $( ".countNumber" ).last().val();

但如果你这样做，它比你的方法便宜得多：

在php中：

foreach($parts as $part)
{               
   $count++;
}
echo "<input type=\"hidden\" id=\"countNumber\" value=\"".$count."\">";

在js：

count = $( "#countNumber" ).val();

或者你可以在php中将你的计数设置为脚本：

在php中：

echo "<script>count =".$count.";</script>"

Working Example on Fiddle

重要说明：我建议您不要使用\"。没有它你可以使用'分隔符。

重要提示2：我建议您不要使用var hidden = $('<input></input>');附加html元素。只需使用字符串var hidden = '<input></input>';

即可

Answer 2

单击.remove时，您可以使用类并使用重新计数功能重新定义索引。这将再次从1开始重新排序输入ID（因此，如果您有1,2,3,4,5并删除3，则所有字段将重新排序为1,2,3,4，并在下次按+时，你将添加5.）

演示：https://jsfiddle.net/p8hu7qnh/23/

function reorder() {
    var reCount = 1;
    $('.field').each(function() {
        elem = $(this);
        elem.attr('id', 'field' + reCount);
        elem.find('.number').text(reCount);
        elem.find('.hiddenField').attr('id', 'hiddenField_' + reCount);
        elem.find('.partNumber').attr('id', 'partNumber_' + reCount);
        elem.find('.description').attr('id', 'description_' + reCount);
        elem.find('.price').attr('id', 'price_' + reCount);            
        reCount++;
    });
    count = reCount-1;
};

$(document).on('click', '.remove', function() {
    console.log('removed');
    $(this).parent().remove();
    reorder();
});

编辑演示从5开始：https://jsfiddle.net/p8hu7qnh/25/

Answer 3

根据您的HTML结构，您可以使用CSS counter解决此问题。

我使用了你的小提琴并稍微更新了一下：https://jsfiddle.net/p8hu7qnh/26/

魔术在CSS中：

.container {
    counter-reset: records; // Define the counter
}

li,
.added-field {
    counter-increment: records; // Increment the counter's value
}

li::before,
.added-field::before {
    content: counter(records); // Render the counter's value
}

在动态文本字段中显示记录的计数器

3 个答案: