如何修复我的 JavaScript 代码以在每次单击复选框按钮时成功显示 "ON" 或 "OFF" 文本？

Question

我的想法是稍后在 PHP 和 Ajax 中添加和关闭功能。但是目前，我在激活HTML代码如下的Visa和Mastercard卡时遇到on和off文本显示错误：

<div class="col-lg-3 mb-lg-0 mb-3">
                <div class="card p-3">
                    <div class="row">
                        <div class="col-8">
                            <div class="img-box"><img src="cardimg/visa.png" alt=""></div>
                            <div class="number"><label class="fw-bold" for="">**** **** **** 1060</label></div>
                        </div>
                        <div class="col-4">
                            <form method="post" class="toggleForm">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="customSwitch1" name='machine_state'>
                                    <label class="custom-control-label" id="statusText1" for="customSwitch1"></label>
                                </div>
                            </form>
                        </div>
                    </div>
 
                    <div class="row">
                            <small class="col-9">
                                <span class="fw-bold">Expiry date:</span>
                            </small>
                            <small class="col-3">
                                <span>10/16</span>
                            </small>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 mb-lg-0 mb-3">
                <div class="card p-3">
                    <div class="row">
                        <div class="col-8">
                            <div class="img-box"><img src="cardimg/mastercard.png" alt=""></div>
                            <div class="number"><label class="fw-bold" for="">**** **** **** 1060</label></div>
                        </div>
                        <div class="col-4">
                            <form method="post" class="toggleForm">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="customSwitch2" name='machine_state'>
                                    <label class="custom-control-label" id="statusText2" for="customSwitch2"></label>
                                </div>
                            </form>
                        </div>
                    </div>
 
                    <div class="row">
                            <small class="col-9">
                                <span class="fw-bold">Expiry date:</span>
                            </small>
                            <small class="col-3">
                                <span>10/16</span>
                            </small>
                    </div>
                </div>
            </div>

和第一个 JS 代码 ids customSwitch1 和 statusText1:

function putStatus() {
    $.ajax({
        type: "GET",
        url: "https://api.srv3r.com/toggle/",
        data: {toggle_select: true},
        success: function (result) {
            if (result == 1) {
                $('#customSwitch1').prop('checked', true);
                statusText1(1);
            } else {
                $('#customSwitch1').prop('checked', false);
                statusText1(0);
            }
        }
    });
}
 
function statusText1(status_val) {
    if (status_val == 1) {
        var status_str = "On";
    } else {
        var status_str = "Off";
    }
    document.getElementById("statusText1").innerText = status_str;
}
 
function onToggle() {
    $('#toggleForm :checkbox').change(function () {
        if (this.checked) {
            //alert('checked');
            updateStatus(1);
            statusText1(1);
        } else {
            //alert('NOT checked');
            updateStatus(0);
            statusText1(0);
        }
    });
}
 
function updateStatus(status_val) {
    $.ajax({
        type: "POST",
        url: "https://api.srv3r.com/toggle/",
        data: {toggle_update: true, status: status_val},
        success: function (result) {
            console.log(result);
        }
    });
}
 
$(document).ready(function () {
    putStatus();//Set button to current status
    onToggle();//Update when toggled
    statusText1();//Last updated text
});

和ids的第二个JavaScript代码customSwitch2和statusText2：

function putStatus() {
    $.ajax({
        type: "GET",
        url: "https://api.srv3r.com/toggle/",
        data: {toggle_select: true},
        success: function (result) {
            if (result == 1) {
                $('#customSwitch2').prop('checked', true);
                statusText2(1);
            } else {
                $('#customSwitch2').prop('checked', false);
                statusText2(0);
            }
        }
    });
}
 
function statusText2(status_val) {
    if (status_val == 1) {
        var status_str = "On";
    } else {
        var status_str = "Off";
    }
    document.getElementById("statusText2").innerText = status_str;
}
 
function onToggle() {
    $('#toggleForm :checkbox').change(function () {
        if (this.checked) {
            //alert('checked');
            updateStatus(1);
            statusText2(1);
        } else {
            //alert('NOT checked');
            updateStatus(0);
            statusText2(0);
        }
    });
}
 
function updateStatus(status_val) {
    $.ajax({
        type: "POST",
        url: "https://api.srv3r.com/toggle/",
        data: {toggle_update: true, status: status_val},
        success: function (result) {
            console.log(result);
        }
    });
}
 
$(document).ready(function () {
    putStatus();//Set button to current status
    onToggle();//Update when toggled
    statusText2();//Last updated text
});

问题是，当我在 HTML 页面级别单击 Checkbox 按钮时，原则上我应该有一个从 [=16= 改变的 toggle 效果] 到 off，每次点击。

但问题是代表 on 和 off 文本的 statusText1 和 statusText2 保持不变，而不是每次单击复选框按钮时都发生变化。

所以请帮助我修复上面的 JavaScript 代码，以便它在我每次单击时成功地将文本从 on 更改为 off。

还有一种方法可以同步不同 ID 的启用和禁用复选框按钮的使用，而不是在几乎相同的两个不同代码中分别执行它们吗？ ?

Answer 1

我已经修复了“打开”和“关闭”问题以及“同步启用和禁用复选框按钮的使用”.请尝试此代码

function putStatus(target) {
    $.ajax({
        type: "GET",
        url: "https://api.srv3r.com/toggle/",
        data: {toggle_select: true},
        success: function (result) {
            if (result == 1) {
                $(target).prop('checked', true);
            } else {
                $(target).prop('checked', false);
            }
        }
    });
}
 
function updateStatus(status_val) {
    $.ajax({
        type: "POST",
        url: "https://api.srv3r.com/toggle/",
        data: {toggle_update: true, status: status_val},
        success: function (result) {
            console.log(result);
        }
    });
}
 
$(document).ready(function () {
    // putStatus('#customSwitch1');
    // putStatus('#customSwitch2');

    $('.statuses').change(function () {
        if($(this).is(':checked')){
            updateStatus(1);
            $(this).next().text('On');
        }else{
            updateStatus(0);
            $(this).next().text('Off');
        }
    });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<div class="col-lg-3 mb-lg-0 mb-3">
    <div class="card p-3">
        <div class="row">
            <div class="col-8">
                <div class="img-box"><img src="cardimg/visa.png" alt=""></div>
                <div class="number"><label class="fw-bold" for="">**** **** **** 1060</label></div>
            </div>
            <div class="col-4">
                <form method="post" class="toggleForm">
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input statuses" id="customSwitch1" name="machine_state">
                        <label class="custom-control-label" for="customSwitch1">Off</label>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <small class="col-9">
                <span class="fw-bold">Expiry date:</span>
            </small>
            <small class="col-3">
                <span>10/16</span>
            </small>
        </div>
    </div>
</div>
<div class="col-lg-3 mb-lg-0 mb-3">
    <div class="card p-3">
        <div class="row">
            <div class="col-8">
                <div class="img-box"><img src="cardimg/mastercard.png" alt=""></div>
                <div class="number"><label class="fw-bold" for="">**** **** **** 1060</label></div>
            </div>
            <div class="col-4">
                <form method="post" class="toggleForm">
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input statuses" id="customSwitch2" name="machine_state">
                        <label class="custom-control-label" for="customSwitch2">Off</label>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <small class="col-9">
                <span class="fw-bold">Expiry date:</span>
            </small>
            <small class="col-3">
                <span>10/16</span>
            </small>
        </div>
    </div>
</div>

如何修复我的 JavaScript 代码以在每次单击复选框按钮时成功显示 "ON" 或 "OFF" 文本？

How to Fix my JavaScript code to succeed in displaying "ON" or "OFF" texts with each click on the checkbox Button?

html

javascript

ajax

checkbox

jquery