Блог

Главная - Вопросы по программированию - Установить переключатель на основе условия при загрузке страницы

Установить переключатель на основе условия при загрузке страницы

#jquery #razor #slidetoggle

#jquery #бритва #slidetoggle

Вопрос:

Вот мой код — 

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

У меня есть этот переключатель, который отображает отфильтрованный список на основе значения переключателя: «АКТИВНЫЙ» или «ОТМЕНА»

Это в режиме Razor. Сетка, отображающая список, находится в частичном представлении. Но переключатель находится в режиме полного просмотра.

Проблема в том, что когда я возвращаюсь к этому представлению, сетка фильтруется на основе условия, но переключатель возвращается в состояние по умолчанию. Например, если я перейду к следующему просмотру из состояния отмены переключателя, когда я вернусь, он все еще должен быть включен Отмена, но переключатель включен.

Как мне это сделать. Любая помощь будет высоко оценена! Это мой первый вопрос, поэтому, если я допустил какие-либо ошибки при публикации, я приношу извинения.

Спасибо!

Ответ №1:

Я добавил еще одну функцию 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);
        }
    }

— Для тех, кто ищет ответ на подобный вопрос. Приветствия!

Ответ №2:

Сначала удалите ненужный дублирующийся код, чтобы сузить проблему, как показано ниже. Проверьте, правильно ли выбранные данные отправлены в действие контроллера, и отфильтрованные данные возвращаются в представление.

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

        });
    });

Комментарии:

1. Спасибо. Я не верю, что у меня дублированный код. Сначала мне нужно получить значение selectedData из атрибута ‘data-on’ / ‘data-off’, прежде чем я смогу проверить значение и передать его контроллеру.

2. Эта часть работает нормально. С чем у меня возникают проблемы, так это с тем, что когда я возвращаюсь к этому представлению, мне нужно, чтобы переключатель находился в том состоянии, в котором я его оставил, прежде чем перейти к следующему представлению. Если я перешел от отмены, он должен быть включен Cancel, а не включен Active.

3. В jQuery вы можете использовать localStorage и sessionStorage для хранения текущего значения представления. Затем в следующий раз, когда представление возвращается из действия контроллера, проверьте значение хранилища, а затем переключите его.