Question

标题 - 对标题感到抱歉，我很难解释这一点。

所以我最近完成了使用jQuery的动态字段系统。这一切都很好，但是我想在同一页面上反复使用html系统，这会导致问题。

问题 - 当您在同一页面上复制表格时，按“添加字段”键。它将运行该函数并将函数应用于页面上的其他类。（例如，请参阅小提琴。）

当你在DOM上只有一个表单时它工作正常，但我想稍微改变html，所以我可以在页面上的不同场景中使用它。我不希望有单独的jQuery文件来执行此操作，因为我认为没有必要。我想也许我可以直接定位它的父容器而不是类？然后我可以回收相同的代码吗？

对这些家伙的任何建议？

HTML：

<form action="javascript:void(0);" method="POST" autocomplete="off">
    <button class="add">Add Field</button>
    <div class='input_line'>
        <input type="text" name="input_0" placeholder="Input1">
        <input type="button" class="duplicate" value="duplicate">
        <input type="button" class="remove" value="remove">
    </div>
</form>

JQUERY：

$(document).ready(function () {
    'use strict';
    var input = 1,
        blank_line = $('.input_line'),
        removing = false;

    $('.remove').hide();

    $('.add').click(function () {
        var newElement = blank_line.clone(true).hide();
        $('form').append(newElement);
        $(newElement).slideDown();
        $('.remove').show();
    });

    $('form').on('click', '.duplicate', function () {
        $(this).parent().clone().hide().insertAfter($(this).parent().after()).slideDown();
        $('.input_line').last().before($('.add'));
        $('.remove').show();
        input = input + 1;
    });

    $('form').on('click', '.remove', function () {
        if (removing) {
            return;
        } else {
            if ($('.input_line').length <= 2) {
                $('.remove').hide();
            }
            $(this).parent().slideUp(function () {
                $(this).remove();
                removing = false;
            });
            $('.input_line').last().before($('.add'));
            input = input - 1;
        }
        removing = true;
    });
});

工作小提琴 - JSFiddle

问题小提琴 - JSFiddle

正如您在上面的问题中所看到的，当您复制表单时，它开始冲突。我希望每个表单都能独立工作。

非常感谢任何帮助！

Answer 1

您需要使用最接近的（＆＃39;表格＆＃39;）来查找关联的表单。另外，在查找其他字段时，您需要在相关表单http://jsfiddle.net/95vaaxsL/7/

的上下文中进行搜索

function addLine($inputLine) {
    var $form = $inputLine.closest('form');
    var $newElement = $inputLine.clone(true).hide();

    $newElement.insertAfter($inputLine);
    $newElement.slideDown();
    $form.find('.remove').show();
}

$(document).ready(function () {
    'use strict';

    $('.remove').hide();

    $('.add').click(function () {
        addLine($(this).closest('form').find('.input_line:last'));
    });

    $('form').on('click', '.duplicate', function () {
        addLine($(this).closest('.input_line'));
    });

    $('form').on('click', '.remove', function () {
        var $inputLine = $(this).closest('.input_line');
        var $form = $inputLine.closest('form');

        if ($form.find('.input_line').length < 3) {
            $form.find('.remove').hide();
        }

        $inputLine.slideUp(function(){
            $inputLine.remove();
        });
    });
});

拉出了这个功能。

使用相同的jQuery函数但在HTML

1 个答案: