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()函数。

计算div中的输入并为每个jquery添加+1

小更新

1 个答案: