Как изменить цвет строки таблицы при нажатии и сохранить изменения

Question

Я использую laravel, у меня есть список букв, я хочу, чтобы, когда я щелкнул по строке, цвет фона этой строки изменился.

Я делаю это с ajax.

это мой ajax: Ajax

это мой letter_table: таблица букв

у меня есть read_letter с два числа 0,1 со значением по умолчанию 0, когда значение 0 буква непрочитана и когда значение 1 читается буква.

это мой взгляд на список букв: Letter представление списка

и это представление списка писем в браузере, когда я не открываю никакую букву: список писем

и это представление письма при открытии письмо: список писем

, но моя проблема в том, что когда я нажимаю на другие буквы, это не работает, просто на первом пункте списка работает хорошо.

это мой контроллер: обновление read_letter в базе данных

Редактировать: вот коды

ajax:

$(document).ready(function () {
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
$("#update_ajax").on('click', function () {
    var letter_id = $(this).data('id');
    var read_letter = 1;
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "/Letter/changeRead",
        data: {'letter_id': letter_id, 'read_letter': read_letter},
        success: function (data) {
            console.log(data.success);
        }
    });
});

});

обновить ле tter_read in letterController:

public function updateLetterRead(Request $request)
{
    $letter = Letter::find($request->letter_id);
    $letter->read_letter = $request->read_letter;
    $letter->save();
    return response()->json(['success' => 'نامه خانده شد']);
}

кнопка для отображения буквы:

<td>
    <a href="{{ route('Letter.show',$letter->id) }}"
             data-id="{{ $letter->id }}"
             id="update_ajax">
             <i class="fas fa-eye"></i>
    </a>
</td>

Answer 1

Идентификатор #update_ajax повторяется для каждой строки таблицы. HTML идентификаторы должны быть уникальными.

Изменить идентификатор класса:

<td>
    <a href="{{ route('Letter.show',$letter->id) }}"
             data-id="{{ $letter->id }}"
             class="update_ajax">
             <i class="fas fa-eye"></i>
    </a>
</td>

$(document).ready(function () {
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
$(".update_ajax").on('click', function () {
    var letter_id = $(this).data('id');
    var read_letter = 1;
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "/Letter/changeRead",
        data: {'letter_id': letter_id, 'read_letter': read_letter},
        success: function (data) {
            console.log(data.success);
        }
    });
});

Answer 2

Это происходит из-за того, что вы запускаете идентификацию, и это происходит несколько раз в поле зрения. Так что конвертируйте его в класс.

"Идентификаторы используются для уникального описания элемента HTML". DO C

Итак, в jQuery обновите $("#update_ajax") до $(".update_ajax"), а в поле зрения удалите id="update_ajax" и добавьте class="update_ajax"

Другой метод взлома:

обновление $("#update_ajax").on('click', function() до $('tbody').on("click","#update_ajax",function() Но приведенное выше предложение является правильным и должно быть выбранным.