计算 div 内的输入并将 +1 添加到每个 jquery

Question

我正在尝试构建滑块，到目前为止我已经构建了所有内容，除了我不知道如何使用 jquery 计算输入字段并在操作完成时给每个字段增加一个数字。

我的幻灯片上有 3 个操作。添加幻灯片，删除幻灯片和排序幻灯片（为了排序，我使用 jquery sortable 上下移动元素）

但主要问题是能够正确保存幻灯片，我需要将每个字段按数组编号排序。

例如这是我在 php 页面中的输入字段。

        $output .= '<div class="repeat-loop">';

        if( is_array( $values ) ) foreach ( (array)$values as $value ){

            $output .= '<div class="repeat-group">';
            $output .= '<input class="input" name="slideshow[0]" type="text" value="" />';
            $output .= '<a class="delete-row button" href="#">'. __('Remove') .'</a>';

            $output .= '</div>';

            $count++;
        }

        $output .= '<div class="repeat-group empty-slide hidden">';
        $output .= '<input class="input" data-rel="slideshow" type="text" value="" />';
        $output .= '<a class="delete-row button" href="#">'. __('Remove') .'</a>';
        $output .= '</div>';


        $output .= '<a id="add-slide" class="button" href="#">Add slide</a>';

        $output .= '</div>';

所以当数据库中有幻灯片时它会输出

<input class="input" name="slideshow[0]" type="text" value="" />
<input class="input" name="slideshow[1]" type="text" value="" />
<input class="input" name="slideshow[2]" type="text" value="" />

这是我目前用作工作的脚本

$('#add-slide').on('click', function() {

    //Get parent element
    var loop = $('repeat-loop'); // .of-repeat-loop

    // Count all repeat group div's
    var count = loop.children('.repeat-group').not('.empty-slide').length;

    //Add new slide
    var new_slide = loop.find('.empty-slide').clone(true).removeClass('empty-slide hidden').insertBefore('#add-slide');

    var input = new_slide.find('input');

    var input_name = input.attr('data-rel');

    input.attr('name', input_name + '[' + ( count ) + ']');

    });

但这仅在我想添加新幻灯片时才有效，它会计算 .repeat-group 的数量并将 +1 添加到下一张幻灯片。

问题在于，这只是将幻灯片数量 +1

所以如果我有 3 张幻灯片，我会拥有

slideshow[0]
slideshow[1]
slideshow[2]

当我删除一张幻灯片时，让我们说中间一张比我剩下的要多

slideshow[0]
slideshow[2]

当我尝试添加新幻灯片时，脚本将从 0 开始再次计算幻灯片的数量并将数字添加到下一张幻灯片。

所以我现在就有

slideshow[0]
slideshow[2]
slideshow[2]

我需要做的是在触发#new-slide、.delete-row 或 .sort 时始终计算输入字段的数量并更改输入字段上的数字，所以我总是喜欢

slideshow[0]
slideshow[1]
slideshow[2]
slideshow[3]

所以我总是可以将数组保存在正确排序的数据库中。

小更新

感谢 OlivierH，我知道如何在删除幻灯片时再次更改数字，现在剩下的只是想知道如何在拖放幻灯片时更改幻灯片的数量。

这是迄今为止工作的更新代码。

$('#add-slide').on('click', function() {

    //Get parent element
    var loop = $(this).parent(); // .repeat-loop

    // Count all repeat group div's
    var count = loop.children('.repeat-group').not('.empty-slide').length;

    //Add new slide
    var new_slide = loop.find('.empty-slide').clone(true).removeClass('empty-slide hidden').insertBefore('#add-slide');

    var input = new_slide.find('input');

    var input_name = input.attr('data-rel');

    input.attr('name', input_name + '[' + ( count ) + ']');

    });


$('.repeat-group').on('click', '.delete-row', function() {
    $(this).parent().remove();

    var loop = $('.repeat-loop');

    var count = loop.children('.repeat-group').not('.empty-slide').each(function(i){

        var input = $(this).find('input');

        var input_name = input.attr('data-rel');

        input.attr('name', input_name + '[' + i + ']');
    });
});

$('.repeat-loop').sortable({
    placeholder: "ui-state-highlight"
});
$('.repeat-loop').disableSelection();

Answer 1

您可以将幻灯片创建部分与命名部分分开。您只需在所有幻灯片上循环并重命名相应的输入。您可以在创建和删除幻灯片时执行此操作。例如：

$('#add-slide').on('click', function() {
    createSlide();
    renameSlides();
});

function createSlide(){
    //Get parent element
    var loop = $('repeat-loop'); // .of-repeat-loop

    //Add new slide
    var new_slide = loop.find('.empty-slide').clone(true).removeClass('empty-slide hidden').insertBefore('#add-slide');
}

function renameSlides(){
    var loop = $('repeat-loop');
    var count = loop.children('.repeat-group').not('.empty-slide').each(function(i){
        //i contains current index

        //set input attr
        $(this).find('input').attr('name', 'slideshow[' + i + ']');
    });
}

您可以在这里看到我创建了两个函数来演示这种分离。删除幻灯片时可以调用renameSlides()函数。

编辑

您也可以在放置幻灯片时调用它，通过使用update 事件：

$('.repeat-loop').sortable({
    placeholder: "ui-state-highlight"
    update: function(event, ui) { renameSlides(); }
});
$('.repeat-loop').disableSelection();

看看documentation。

结束编辑

我不确定整个代码是否正常工作，也许你需要稍微调整一下renameSlides() 函数。