复选框值根据用户输入的数据反转，JavaScript在检查时需要知道

Question

晚上好，

我有一个场景，用户正在检查一个框，通过SparkJava / Java在MySQL数据库中输入一行数据（或更新一行数据）。除了一个小问题外，一切都按预期工作。

如果数据库中已存在一个值，则复选框与它应该是相反的。例如......用户第一次单击复选框时，会将其添加到数据库中。但是，如果您刷新页面，它将尝试再次添加它而不是删除它。

我几乎可以肯定问题出在以下几行：

var newValue = $(this).is(':checked') ? "add" : "remove";

但我不知道如果已经检查了值，如何让JavaScript知道。请注意，我已经通过我的HTML中的Velocity使用条件语句进行此检查（此功能按预期工作）。

#if ($amiibo.Collected == "Y")
<div class="star has-text-warning" id="star$amiibo.AmiiboID">
#else
<div class="star" id="star$amiibo.AmiiboID">
#end

以下是我的Javascript的完整代码段：

$(document).ready(function(){
    $( ".mine" ).change(function() {

     var newValue = $(this).is(':checked') ? "add" : "remove";

        var amiibo = $(this).attr('id');
        var activeAmiiboID = amiibo.split('#')[1];
        var activeAmiiboName = amiibo.split('#')[2];
        $("#star"+activeAmiiboID).toggleClass("has-text-warning");
        console.log( "Handler for .change() called with value: " + newValue );
        console.log("activeAmiiboID is: "+ activeAmiiboID);
        console.log("Sending request to backend");
        if (newValue == 'add') {
            VanillaToasts.create({
                title: 'Added to Favorites',
                text: activeAmiiboName + ' has been added to your Collection.',
                timeout: 4000,
                type: 'success',
            });
        }
        else if (newValue == 'remove') {
            VanillaToasts.create({
                title: 'Removed from Favorites',
                text: activeAmiiboName + ' has been removed from your Collection.',
                timeout: 4000,
                type: 'error',
            });
        }
        $.ajax({
            url: '/collection',
            type: 'post',
            data: {
                mine: newValue + "Amiibo",
                amiiboID: activeAmiiboID
            },
            success: function () {
                console.log("Request completed successfully");
            }
        });
    });

任何帮助将不胜感激。还有......

A）根据我在速度中的条件语句检查使javascript知道这个值的方法或B）使Javascript知道这个值的另一种合理方法被检查

谢谢！特拉维斯W.

Answer 1

我想我想出了这个。在让JS决定添加或删除之前，我通过if语句运行一个新变量addRemove。仍然对其他想法开放！始终乐于学习。以下是我测试过的解决方案，它正在运行：

$(document).ready(function(){
    $( ".mine" ).change(function() {

        var amiibo = $(this).attr('id');
        var activeAmiiboID = amiibo.split('#')[1];
        var activeAmiiboName = amiibo.split('#')[2]
        var addRemove = document.getElementById("mine#"+activeAmiiboID+"#"+activeAmiiboName).value;

        if (addRemove == 'Y') {
            console.log("If: Value was "+ addRemove);
            var newValue = $(this).is(':checked') ? "remove" : "add";

        } else {
            console.log("Else: Value was "+ addRemove);
            var newValue = $(this).is(':checked') ? "add" : "remove";
        }

        $("#star"+activeAmiiboID).toggleClass("has-text-warning");
        console.log( "Handler for .change() called with value: " + newValue );
        console.log("activeAmiiboID is: "+ activeAmiiboID);
        console.log("Sending request to backend");
        if (newValue == 'add') {
            VanillaToasts.create({
                title: 'Added to Favorites',
                text: activeAmiiboName + ' has been added to your Collection.',
                timeout: 4000,
                type: 'success',
            });
        }
        else if (newValue == 'remove') {
            VanillaToasts.create({
                title: 'Removed from Favorites',
                text: activeAmiiboName + ' has been removed from your Collection.',
                timeout: 4000,
                type: 'error',
            });
        }
        $.ajax({
            url: '/collection',
            type: 'post',
            data: {
                mine: newValue + "Amiibo",
                amiiboID: activeAmiiboID
            },
            success: function () {
                console.log("Request completed successfully");
            }
        });
    });