復選框值根據用戶輸入的數據取反，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知道此值的方法是根據我的速度或條件條件語句來檢查的

謝謝！ 特拉維斯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");
            }
        });
    });