Question

这是我的代码 -

＆＃13;

(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();
            });
        });

    })();

＆＃13;

<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>

＆＃13;

我有这个切换开关，根据开关值显示过滤后的列表：＆＃39; ACTIVE＆＃39;或者＆＃39;取消＆＃39;

这是Razor视图。显示列表的网格位于部分视图中。但切换开关在完整视图中。

问题是当我返回到此视图时，网格会根据条件进行过滤，但交换机会返回其默认状态。例如，如果我从Toggle开关状态取消进入下一个视图，当我返回时它应该仍然在取消但是切换开关处于激活状态。

我该怎么做。任何帮助将非常感谢！这是我的第一个问题，所以如果我在发帖时犯了任何错误，我会道歉。

谢谢！

Answer 1

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

这是我更新的代码 -

＆＃13;

$(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);
        }
    }

＆＃13;

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

Answer 2

首先删除不需要的重复代码以缩小问题范围，如下所示。检查selectedData是否正确发布到控制器操作，并将过滤后的数据返回到视图。

  $(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();

        });
    });

根据页面加载条件

2 个答案: