0

Есть следующая проблема: При нажатии на каждую из кнопок 0 1 0, 0 1 1 и т.д. в консоли должны отображаться данные (дата и врач), которые берутся из атрибутов value через class и id. В цикле подставляются нужные значения и срабатывает нужная кнопка. НО: как только я добавила в html коде id="{{ $doctor->id }}", чтобы id врачей тоже можно было перебрать в цикле, стала выводиться только первая дата, остальное - undefined. В чём может быть проблема? введите сюда описание изображения

JS:

let date_count = $('#date_count').val();
    let doctor_count = $('#doctor_count').val();
    let time_count = $('#time_count').val();
    for(let i = 0; i < date_count; i++){
        let date_id = i;
        for(let j = 1; j <= doctor_count; j++){
            let doctor_id = j;
            for(let k = 0; k < time_count; k++){
                let time_id = k;
                $(`#${date_id}${doctor_id}${time_id}`).on('click', function(){
                    let date = $(`.date#${date_id}`).val();
                    let doctor = $(`.doctor#${doctor_id}`).val();                
                    let time = $('#time').val();

                    console.log(date)
                    console.log(doctor)

                    let token = $('#token').val();   
                })
            }
        }
    }

HTML:

@foreach($sorted_date as $date)              
            @foreach ($polyclinic_doctors as $doctor)               
                <div class="card-body">
                    <data type="hidden" name="_token" id="token" value="{{ csrf_token() }}"></data>

                    <data id="date_count" value="{{$loop->parent->count}}">
                        <data id="date_id" value="{{ $loop->parent->index }}"></data>
                        <data class="date" id="{{ $loop->parent->index }}" value="{{ $date }}">{{ $date }}</data>
                    </data>

                    <data id="doctor_count" value="{{$loop->count}}">
                        <data type="hidden" class="doctor" id="{{ $doctor->id }}" value="{{ $doctor->id }}"></data>
                        <p>{{ $doctor->name }} {{ $doctor->field }} {{ $doctor->office }}</p>
                    </data>                               

                    @foreach ($times as $time)
                        <data type="hidden" id="time_count" value="{{$loop->count}}">
                            <data id="time_id" value="{{ $loop->index }}"></data>
                            <data type="hidden" name="time" id="time" value="{{ $time }}"></data>
                        </data>

                        <span class="appointments">
                            <button class="btn btn-info" 
                                id="{{$loop->parent->parent->index}}{{ $doctor->id }}{{ $loop->index }}"
                                value="{{ $time }}">
                                {{$loop->parent->parent->index}} {{ $doctor->id }} {{ $loop->index }}
                            </button>
                        </span>                                        
                    @endforeach
                </div>
            @endforeach              
        @endforeach
1
  • 1
    атрибуты id не должны повторяться, иначе поведение непредсказуемо. для стилизации используются классы, для передачи данных - пользовательские атрибуты. использование пользовательских элементов подразумевает их объявление в каком-то месте, иначе они определяются как неизвестные элементы без методов. возможно чтобы никого не путать вместо data использовать div. не говоря о том, что вы помечаете HTML кодом код, который не является HTML и во что он превращается потом совершенно неясно. javascript надеюсь подключается после добавления всех докторов. Commented 23 июн. 2023 в 10:34

1 ответ 1

1

Слишком усложняете...

 <data type="hidden" name="_token" id="token" value="{{ csrf_token() }}"></data>

это новшество какое-то? обычно делается так:

 <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

а блоки это <div></div>, а не <data></data>

let doctor_count = $('#doctor_count').val();
let time_count = $('#time_count').val();
let time = $('#time').val();

id это атрибут который должен быть уникальный на странице. Если он повторяется - всегда будет браться 1 эл-т. Добавляйте те же классы:

<input class="doctor_count" value="{{$loop->count}}">
...
<input type="hidden" class="time_count" value="{{$loop->count}}">
...
<input type="hidden" name="time" class="time" value="{{ $time }}">

и js:

// вешает событие на кнопки в блоке .appointments внутри .card-body
$('.card-body .appointments button').on('click', function(evt) {
    // находим весь родительский блок
    let parrent = $(evt.target).closest('.card-body');
    // ищем что нужно в самом блоке
    let date = parrent.find('.date').val();
    let doctor = parrent.find(`.doctor`).val();                
    let time = parrent.find('.time').val();

    console.log(date)
    console.log(doctor)

    // токен один на всю страницу - его вне цикла добавлять надо
    let token = $('#token').val();   
});

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.