jQuery - Невозможно клонировать вложенную строку внутри формы - PullRequest
Новая
       1

jQuery - Невозможно клонировать вложенную строку внутри формы

1 голос
/ 21 января 2020

Подобно этому вопросу, у меня есть форма и я хочу использовать clone() и remove() для динамического изменения полей, видимых пользователю. У пользователя есть два элемента управления: + и - для добавления или удаления строк соответственно.

Однако моя проблема немного отличается, потому что я хочу включить клонирование для каждой из вложенных строк в форме не зависит друг от друга. Использование позволяет пользователю указывать один или несколько временных интервалов (например, от 9AM до 5PM в каждый день). Другими словами, пользователь должен иметь возможность добавлять столько временных интервалов, сколько ему нужно, но нажатие + или - в понедельник повлияет только на ряд полей внутри Monday - не повлияет на другие дни.

Снимки экрана

  1. Форма - начальное состояние
  2. Форма - как это должно выглядеть (когда пользователь добавляет строка под каждым днем)

Я смог получить его там, где нажатие + или - дублирует всю строку (включая флажок) - это не то, что я хочу : https://jsfiddle.net/9jpraney/

Я знаю, что поля From и To должны быть внутри родительского элемента div, и этот родительский элемент div должен быть клонирован. Однако, когда я делаю это изменение, оно вообще не клонируется.

Вот моя последняя попытка: https://jsfiddle.net/znxj5Lrs/

var regex = /^(.+?)(\d+)$/i;
var cloneIndex = $(".time-interval").length;

function clone(){
    $(this).parents(".time-interval").clone()
        .appendTo("body")
        .attr("id", "time-interval" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        })
        .on('click', '.add-interval', clone)
        .on('click', '.remove-interval', remove);
    cloneIndex++;
}
function remove(){
    $(this).parents(".time-interval").remove();
}
$(".add-interval").on("click", clone);

$(".remove-interval").on("click", remove);
.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.btn-alt-success {
    color: #5c852c;
    background-color: #ebf5df;
    border-color: #ebf5df;
}

.btn-alt-danger {
    color: #af1310;
    background-color: #fae9e8;
    border-color: #fae9e8;
}

.actions > a {
    cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
    <label class="col-3">Days <span class="text-danger">*</span></label>
    <label class="col-9">Times</label>
</div>
<div class="form-group row">
    <!--<label class="col-lg-2 col-form-label mt-10">Step</label>-->

    <div class="col-lg-3">
        <div class="custom-control custom-checkbox mb-20">
            <input class="custom-control-input" type="checkbox" id="monday" name="days[]" value="monday">
            <label class="custom-control-label" for="monday">Monday</label>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="row time-interval">
            <div class="col-lg-5">
                <select class="form-control form-control-lg" name="from_hours[monday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9" selected> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17"> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
            <div class="col-lg-2">
                <span class="pl-15">to</span>
            </div>
            <div class="col-lg-5">
                <select class="form-control form-control-lg mb-30" name="to_hours[monday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9"> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17" selected> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
        </div>
    </div>
    <div class="col-lg-4 actions">
        <a class="btn btn-alt-success add-interval">+</a>
        <a class="btn btn-alt-danger remove-interval">-</a>
    </div>

    <div class="col-lg-3">
        <div class="custom-control custom-checkbox mb-20">
            <input class="custom-control-input" type="checkbox" id="tuesday" name="days[]" value="tuesday">
            <label class="custom-control-label" for="tuesday">Tuesday</label>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="row time-interval">
            <div class="col-lg-5">
                <select class="form-control form-control-lg" name="from_hours[tuesday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9" selected> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17"> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
            <div class="col-lg-2">
                <span class="pl-15">to</span>
            </div>
            <div class="col-lg-5">
                <select class="form-control form-control-lg mb-30" name="to_hours[tuesday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9"> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17" selected> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
        </div>
    </div>
    <div class="col-lg-4 actions">
        <a class="btn btn-alt-success add-interval">+</a>
        <a class="btn btn-alt-danger remove-interval">-</a>
    </div>

    <div class="col-lg-3">
        <div class="custom-control custom-checkbox mb-20">
            <input class="custom-control-input" type="checkbox" id="wednesday" name="days[]" value="wednesday">
            <label class="custom-control-label" for="wednesday">Wednesday</label>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="row time-interval">
            <div class="col-lg-5">
                <select class="form-control form-control-lg" name="from_hours[wednesday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9" selected> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17"> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
            <div class="col-lg-2">
                <span class="pl-15">to</span>
            </div>
            <div class="col-lg-5">
                <select class="form-control form-control-lg mb-30" name="to_hours[wednesday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9"> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17" selected> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
        </div>
    </div>
    <div class="col-lg-4 actions">
        <a class="btn btn-alt-success add-interval">+</a>
        <a class="btn btn-alt-danger remove-interval">-</a>
    </div>

    <div class="col-lg-3">
        <div class="custom-control custom-checkbox mb-20">
            <input class="custom-control-input" type="checkbox" id="thursday" name="days[]" value="thursday">
            <label class="custom-control-label" for="thursday">Thursday</label>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="row time-interval">
            <div class="col-lg-5">
                <select class="form-control form-control-lg" name="from_hours[thursday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9" selected> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17"> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
            <div class="col-lg-2">
                <span class="pl-15">to</span>
            </div>
            <div class="col-lg-5">
                <select class="form-control form-control-lg mb-30" name="to_hours[thursday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9"> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17" selected> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
        </div>
    </div>
    <div class="col-lg-4 actions">
        <a class="btn btn-alt-success add-interval">+</a>
        <a class="btn btn-alt-danger remove-interval">-</a>
    </div>



</div>

Я застрял здесь, не уверен, почему он работает на весь ряд, но не на его части. Я подозреваю, что это как-то связано с использованием parent(), но не уверен. Любое понимание очень ценится!

1 Ответ

2 голосов
/ 21 января 2020

См. Это для рабочего кода

https://jsfiddle.net/p9Loj8kc/1,

То, как вы находите .time-интервал, неверно.

Ниже приведено изменение кода в js

js:

var regex = /^(.+?)(\d+)$/i;
var cloneIndex = $(".time-interval").length;
function clone(){
var $closestTimeInterval = $(this).closest(".actions").siblings(".time-interval").first();
    $closestTimeInterval.clone()
        .insertAfter($closestTimeInterval).attr("id", "time-interval" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        });
    cloneIndex++;
}
function remove(){
    $(this).parents(".time-interval").remove();
}
$(".add-interval").on("click", clone);

$(".remove-interval").on("click", remove);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...