Блог

Я разрабатываю систему бронирования билетов в laravel. Это позволит пользователям бронировать свои места. Теперь я хочу отключить те места, которые ранее были забронированы другим пользователем. Количество забронированных мест уже передается в блейде через массив. Кнопки мест генерируются динамически на основе общего количества мест. Я хочу отключить эти забронированные места по их значению. Как и A1, A2 забронированы, поэтому кнопки, содержащие значения A1 и A2, будут отключены. Вот мой HTML-код

 <form class="form-control" style="width: auto">
                <div class="btn-group btn-group-sm"  id="col1Buttons" style="display: inline-grid; padding: 10px;">
                </div>
                <div class="btn-group btn-group-sm"  id="col2Buttons" style="display: inline-grid; margin-right: 15px;">
                </div>
                <div class="btn-group btn-group-sm"  id="col3Buttons" style="display: inline-grid; margin-left: 15px;">
                </div>
                <div class="btn-group btn-group-sm"  id="col4Buttons" style="display: inline-grid; padding: 10px;">
                </div>
            </form>
  

//{{$all_seats}} содержит все забронированные места//

код javascript для добавления кнопок сиденья

 <script>
var pages = {{$seat_number/4}};
// console.log(pages);
var page1Buttons = $('#col1Buttons');
var page2Buttons = $('#col2Buttons');
var page3Buttons = $('#col3Buttons');
var page4Buttons = $('#col4Buttons');

for (var j=65; j<65 pages; j  ){
    page1Buttons.append('<input class="btn single_seat" name="options"  type="button" id="seat" value="'   String.fromCharCode(j)   ''   1   '"/>');
    page2Buttons.append('<input class="btn single_seat" name="options"  type="button" id="seat" value="'   String.fromCharCode(j)   ''   2   '"/>');
    page3Buttons.append('<input class="btn single_seat" name="options"  type="button" id="seat" value="'   String.fromCharCode(j)   ''   3   '"/>');
    page4Buttons.append('<input class="btn single_seat" name="options"  type="button" id="seat" value="'   String.fromCharCode(j)   ''   4   '"/>');
}
  

Переключитесь на рендеринг в блейде

Вместо того, чтобы отображать ваш HTML в JavaScript, я советую вам просто переключить этот рендеринг кнопок на blade. Таким образом, вы получаете полный контроль над происходящим, и вы можете легко проверить, занят ли номер места.

Вы можете использовать цикл for, который уже имеет индекс, и применить ту же логику, что и в JS

Присвоить переменной JS значение

Если вы действительно хотите сохранить метод JS, перед загрузкой скрипта, который будет выполнять рендеринг кнопок, обязательно объявите новую переменную JS, например

 <script>
const taken = "@json($all_seats)"
</script>
  

Приведенный выше код должен помочь с правильным преобразованием, чтобы теперь вы могли использовать taken его в своем скрипте рендеринга и выполнять проверки.

После того, как у вас есть занятые места в массиве, вы можете просто проверить, есть ли номер места в массиве:

 if(taken.includes(seat_number)){
 ... Generate disabled button
}
else{
 ... Generate normal button
}