如何在Ajax中高效地编写“切换数据库值”函数?

假设我有一个网站,它向用户显示十幅图片,并要求他们通过点击按钮对每幅图片进行分类。一个“有趣”的按钮,一个“可怕”的按钮,一个“漂亮”的按钮等等。这些按钮不是独家的。一张照片既有趣又可怕。

用户单击“有趣”按钮。将向数据库发送一个Ajax请求,以将该图像标记为有趣的图像。通过在DOM中指定一个类来将其标记为“on”,“有趣”按钮将亮起。

但是用户犯了一个错误。他们打算按下下一个按钮。他们应该再次单击“有趣”关闭它,对吗?

在这一点上,我不确定什么是最有效的方法。

数据库知道设置了“搞笑”标志,但是每次单击按钮时查询数据库效率很低,不管是否设置了该标志,然后再进行第二次数据库调用来切换它。

我是否应该从DOM推断数据库标志的状态,即,如果该按钮的类为“on”,则必须设置该标志,并在该点进行分支?

或者在页面中使用javascript中的数据结构来复制数据库中每个图像的状态,这样每次我将数据库标志设置为true时,也会将javascript数据中的值设置为true等等,这样会更好吗?