php - 单击并保存更改时如何更改表格行的颜色

Question

我正在使用 Laravel，我有一个字母列表，我想当我单击行时，该行的背景颜色会发生变化。

我用ajax来做这个。

这是我的ajax:Ajax

这是我的 letter_table :letter table

我有 read_letter ，其中包含两个数字 0,1，默认值为 0，当值为 0 字母时未读，当值为 1 时，已读取字母。

这是我对信件列表的看法:Letter list view

这是当我不打开任何字母时浏览器中字母列表的 View :letter list

这是我打开信件时的信件 View :letter list

但我的问题是，当我单击其他字母时，它不起作用，仅在列表的第一项上运行良好。

这是我的 Controller :update read_letter in database

编辑:这是代码

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);
        }
    });
});

});

更新 letterController 中的 letter_read :

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

它的发生是因为您触发了 id 并且它在 View 中多次出现。因此将其转换为类。

“Id 用于唯一地描述 HTML 元素”。 <强> DOC

因此，在 jQuery 中将 $("#update_ajax") 更新为 $(".update_ajax") 并在 View 中删除 id="update_ajax" 并添加 class="update_ajax"

另一种黑客方法是:

更新 $("#update_ajax").on('click', function() 要 $('tbody').on("click ","#update_ajax",function() 但是上面的建议是正确的，需要被选中。