将变量传递到Bootstrap 4模式的异常行为

Question

我有这个HTML应该可以打开一个模式，信息动态变化。

我正在尝试5个变量：

• 数据雇员，
• 数据时间
• 数据开始
• 数据转移
• 数据图像

所有五个变量都是字符串类型。

我的HTML这样调用模式：

@foreach($appointments as $appointment)

    <a  class="text-success"
        data-toggle="modal"
        data-target="#modal_createAppointment"
        data-employee="{{ $employee }}"
        data-time="{{ Carbon\Carbon::parse($appointment['startDate'])->isoFormat('dddd, DD MMMM') }}"
        data-start="{{ $starting_at }}"
        data-shift="{{ $workshift }}"
    data-image = "{{ $image }}"
        aria-pressed="true">
        {{ $appointment['starting_at'] }} <i class="fas fa-chevron-right ml-2"></i>
    </a>

@endforeach

模式将打开：

<div id="modal_createAppointment" tabindex="-1" role="dialog" aria-labelledby="modal_createAppointment">

<div id="modal-appointments" class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">
                <span id="modal-employee"></span>
                <span id="modal-start"></span>
                <span id="modal-shift"></span>            
                <span id="modal-time"></span>
            </h4>
        </div>

        <div class="modal-body">
            <div class="modal-info">
                <form method="POST" action="{{route('frontend.company.appointment.store', $company )}}" accept-charset="UTF-8">
                    <input name="startTime" type="hidden" id="attribute_0">
                    <input name="employee_name" type="hidden" id="attribute_1">
                    <input name="image" type="hidden" id="attribute_2">
                    {{ csrf_field() }}

                         // ... More code hier
                 </form>
            </div>
        </div>
    </div>
</div>

<script>
var ATTRIBUTES = ['employee', 'time', 'start', 'shift', 'image'];

$('[data-toggle="modal"]').on('click', function (e) {
    var $target = $(e.target);
    var modalSelector = $target.data('target');

    let count = 0;

    ATTRIBUTES.forEach(function (attributeName) {

    var $modalAttribute = $(modalSelector + '#modal-' + attributeName);
    var dataValue = $target.data(attributeName);

    $modalAttribute.text(dataValue || '');
    document.getElementById('attribute_' + count).value = $target.data(attributeName);
    count++
    });
});

</script>

</div>

存在所有四个变量（我在Chrome开发者工具中看到所有正确的变量，但它只是通过数据时间和数据员工。我已经更改了具有相同结果的顺序。

我不知道为什么只传递2个变量而不是5个？

显然我缺少简单的东西，但不知道是什么

Answer 1

您的代码中有一些语法错误：

• 您正试图用方括号将胡须闭合：data-image = "{{ $image ]]"
• 此数组中的最后一个元素未正确引用：var ATTRIBUTES = ['employee', 'time', 'start', 'shift', 'image];
• [$modalAttribute似乎未定义就使用]

从上述语法错误看来，您似乎没有使用IDE。

使用一项的众多优点之一是，它会在您制作错字时突出显示任何错别字，有效地将查找和修复错字的时间从数小时缩短至数秒。