Question

我尝试用PHP和Javascript制作一些可重复的字段。这样可以正常工作，但在保存帖子（为WordPress创建插件）后，克隆的行将覆盖最新的一行。这是因为我没有为每一行使用唯一的id。

我想用javascript添加'id'属性，我想要为id 1增加创建的每一行。我已经用PHP做了类似的事情，但发现这不是我想要的，我觉得我用javascript更好，我想，因为当我使用“添加新”按钮克隆字段时，数量不会增加1;

这是我用过的php代码：

$count = 2;
for ($i = 0; $i < $count; $i++) {

    // Begin a table row
    echo '<tr class="row" id="' . '['.$i.']' . '-repeatable">';
    echo '<td class="order">' . '['.$i.']' . '</td>';

            // Do cool stuff inside the row

    echo '<td class="remove"><a class="repeatable-remove button" href="#">-</a></td>';
    echo '</tr>'; // End .row

} // End for loop

<a href"#" class="button">Add new row</a>

可重复字段的JS代码：

// Add repeatable row
jQuery('.repeatable-add').click(function() {
    // Clone row
    var row = jQuery(this).closest('.ui-sortable').find('tbody tr.row:last-child');
    var clone = row.clone();

    clone.find('input[type=text], text, textarea, select, input.upload_image').val(''); // Reset the values
    clone.find('.preview_image').attr('src', ''); // Reset the values

    row.after(clone);

    //
    return false;
});

我想我必须做一些类似于以下行的代码：

clone.find('tr.row').attr('id', 'repeatable-' + addInteger);

但是如何在Jquery / Javascript中增加+1，就像我在PHP中的例子一样？

Answer 1

您要做的是查看要克隆的行的ID，并使用该ID为新行指定正确的索引值。我在您的示例中添加了两行代码，一行定义了一个名为clonedIdIndex的新变量，另一行使用该变量中的值来定义克隆行的新ID。

jQuery('.repeatable-add').click(function() {
    // Clone row
    var row = jQuery(this).closest('.ui-sortable').find('tbody tr.row:last-child'),
        clone = row.clone(),
        clonedIdIndex = parseInt( clone.find('tr.row').attr('id').split('-')[1], 10 );

    clone.find('input[type=text], text, textarea, select, input.upload_image').val('');    
    clone.find('.preview_image').attr('src', ''); // Reset the values

    // Assign new ID
    clone.find('tr.row').attr('id', 'repeatable-' + (++clonedIdIndex));

    row.after(clone);

    //
    return false;
});

为按钮创建的每个新行添加i ++

1 个答案: