jquery.repeater 且 bootstrap 自定义开关失败

Question

晚上好，

我的 jquery form repeater 插件和 bootstrap 有问题。我有这个表单元素是转发器表单的一部分：

<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="questionSwitch" name="question_correct[]">
    <label class="custom-control-label" for="questionSwitch">Richtige Antwort</label>
</div>

现在的问题是，如果转发器重复这个元素，我点击 s 上的第二个或第三个重复项目，第一个项目上的 s 被更改，而不是我点击。因为他们三个都有相同的id。

有人知道如何解决这个问题吗？第一次使用表单转发器

这里有更多的代码

$(function () {
    'use strict';

    if (!$('#multiple-choice').attr('checked')) {
        $('#questions').hide();
    }

    $('#multiple-choice').on('click', function () {
        if (this.checked)
            $('#questions').show();
        else $('#questions').hide();
    });

    // form repeater jquery
    $('#whitelist-new-question').repeater({
        show: function () {
            $(this).slideDown();
            // Feather Icons
            if (feather) {
                feather.replace({ width: 14, height: 14 });
            }
        },
        hide: function (deleteElement) {
            if (confirm('Möchten Sie diese Antwort wirklich löschen?')) {
                $(this).slideUp(deleteElement);
            }
        }
    });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.1.2/jquery.repeater.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.min.js"></script>
<div class="card">
  <div class="card-body">
<form class="form form-vertical" action="{{ route('whitelist-new-question') }}" method="post"
                    id="whitelist-new-question">
                    <div class="row">
                        @csrf
                        <div class="col-12">
                            <div class="form-group">
                                <label for="question-title">Titel</label>
                                <input type="text" class="form-control" id="question-title" name="questionTitle"
                                    value="{{ old('questionTitle') }}" />
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="question-required"
                                        name="questionRequired" value="1"
                                        {{ old('questionRequired') == '1' ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="question-required">Immer Fragen</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="multiple-choice" name="multiChoice"
                                        value="1" {{ old('multiChoice') == '1' ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="multiple-choice">Multiple Choice</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12" id="questions">
                            Antworten
                            <hr />
                            <div data-repeater-list="questions">
                                <div data-repeater-item>
                                    <div class="row d-flex align-items-end">
                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="question-text">Text</label>
                                                <input type="text" class="form-control" id="question-text"
                                                    name="question_text[]" aria-describedby="question-text" />
                                            </div>
                                        </div>
                                        <div class="col-md-2 col-12 mt-auto mb-auto">
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input" id="currect-switch"
                                                    name="question_correct[]">
                                                <label class="custom-control-label" for="currect-switch">Richtige
                                                    Antwort</label>
                                            </div>
                                        </div>
                                        <div class="col-md-2 col-12 mb-50">
                                            <div class="form-group">
                                                <button class="btn btn-outline-danger text-nowrap px-1" data-repeater-delete
                                                    type="button">
                                                    <i data-feather="x" class="mr-25"></i>
                                                    <span>Löschen</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <hr />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <button class="btn btn-icon btn-primary" type="button" data-repeater-create>
                                        <i data-feather="plus" class="mr-25"></i>
                                        <span>Weitere Antwort</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-success mt-2">Speichern</button>
                        </div>
                    </div>
                </form></div></div>

Answer 1

好的，我已经解决了这个问题。在 js 脚本中，我创建了一个变量编号，并在中继器的显示事件中添加了这段代码：

show: function () {
    var inputSwitch = $(this).find('.custom-control-input');
    var labelSwitch = $(this).find('.custom-control-label');
    var id = 'currect-switch-' + number;
    
    inputSwitch.attr("id", id);
    labelSwitch.attr("for", id);
    
    $(this).slideDown();
    // Feather Icons
    if (feather) {
        feather.replace({ width: 14, height: 14 });
    }
    
    number++;
},

jquery.repeater 且 bootstrap 自定义开关失败

jquery.repeater with bootstrap custom-switch failure

javascript

jquery

bootstrap-4

jquery.repeater