根据页面加载条件设置切换开关

Question

这是我的代码 -

(function () {
        $(document).ready(function () {
            
            $('.switch-input').on('change', function () {
                var isChecked = $(this).is(':checked');
                var selectedData;
                var $switchLabel = $('.switch-label');
                if (isChecked) {
                    selectedData = $switchLabel.attr('data-on');
                } else {
                    selectedData = $switchLabel.attr('data-off');
                }
                if (selectedData === 'ACTIVE') {
                    selectedData = 'A';
                } else {
                    selectedData = 'C';
                }
                $('#h-status').val(selectedData);
                $('#form_filterBillItems').submit();
            });
        });

    })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch">
                        <input class="switch-input" type="checkbox"/>
                        <span id ="tglInp" class="switch-label" data-on="CANCEL" data-off="ACTIVE"></span> <span class="switch-handle"></span>
                    </label>

我有这个切换开关，它根据开关值显示过滤列表：'ACTIVE' 或 'CANCEL'

这是在 Razor 视图上。显示列表的网格处于局部视图中。但是拨动开关在全视图上。

问题是当我 return 到此视图时，网格会根据条件进行过滤，但开关会返回到其默认状态。例如，如果我从 Toggle switch 状态 Cancel 转到下一个视图，当我 return 它应该仍然处于 Cancel 状态但切换开关处于 Active 状态。

我该怎么做。任何帮助将不胜感激！这是我的第一个问题，所以如果我在发帖时有任何错误，我深表歉意。

谢谢！

Answer 1

首先删除不需要的重复代码以缩小问题范围，如下所示。检查selectedData是否正确发布到controller action，过滤后的数据是否返回到view。

  $(document).ready(function () {

        $('.switch-input').on('change', function () {

            var isChecked = $(this).is(':checked');

            var selectedData;

            if (isChecked) {

                selectedData = 'A';

            } else {

                selectedData = 'C';

            }

            $('#h-status').val(selectedData);

            $('#form_filterBillItems').submit();

        });
    });

Answer 2

我添加了另一个 javascript 函数来检查拨动开关值并根据条件更改它。

这是我更新的代码 -

$(document).ready(function () {
            var data = @Html.Raw(Json.Encode(ViewData["bi_status"]));
            if (data==='A'){ data = 'ACTIVE'; } else{ data = 'CANCEL'; }
           $('.switch-input').on('change', function () {...});
        });
    })();
    

    function setSwitch(args) {
        var $switchLabel = $('.switch-label');
        var $switchInput = document.getElementById('tglInp');
        var dataOn = $switchLabel.attr('data-on');
        var dataOff = $switchLabel.attr('data-off');
        if (args === 'CANCEL') {
            $switchInput.checked = true;
            $switchLabel.attr('data-on', dataOn);

        } else {
            $switchInput.checked = false;
            $switchLabel.attr('data-off', dataOff);
        }
    }

-- 对于正在寻找类似问题答案的任何人。干杯！

根据页面加载条件设置切换开关

Set Toggle switch based on condition on page load

jquery

slidetoggle

razor