Блог

Главная - Вопросы по программированию - Переключение aria-нажата = true / false в ASP.NET Ошибка создания представления MVC

Переключение aria-нажата = true / false в ASP.NET Ошибка создания представления MVC

#javascript #jquery #asp.net-mvc

#javascript #jquery #asp.net-mvc

Вопрос:

Я должен переключить класс bootstrap .active и aria-pressed = true / false, чтобы обработать доступность в asp.net Просмотр MVC при нажатии на кнопку. Я установил .active и aria-pressed в значение true для нажатой кнопки и false для остальных кнопок. Я выполнил следующий код, чтобы изменить имя класса CSS и атрибут. CSS class .active работает нормально, но я получаю сообщение об ошибке как

«Неперехваченная ошибка типа: не удается прочитать свойство ‘setAttribute’ неопределенного значения в HTMLButtonElement».

Не могли бы вы, пожалуйста, помочь мне устранить ошибку?

 @{
    Layout = null;
}

    <!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>MyTest</title>

        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        <script type="text/javascript">
            $(document).ready(function () {
                var btnContainer = document.getElementById("containerDiv");

                // Get all buttons with class="btn" inside the container
                var btns = btnContainer.getElementsByClassName("btn");

                // Loop through the buttons and add the active class to the current/clicked button
                for (var i = 0; i < btns.length; i  ) {
                    btns[i].addEventListener("click", function () {
                        var current = document.getElementsByClassName("active");

                        // If there's no active class
                        if (current.length > 0) {
                            current[0].className = current[0].className.replace(" active", "");

                            current[0].setAttribute("aria-pressed", "false");
                        }

                        // Add the active class to the current/clicked button
                        this.className  = " active";
                        this.setAttribute("aria-pressed", "true");
                    });
                }
            });
        </script>
    </head>
    <body>
        <div id="containerDiv">
            <button class="btn btn-primary" type="button" aria-pressed="false">
                Product 1
            </button>

            <button class="btn btn-primary" type="button" aria-pressed="false">
                Product 2
            </button>

            <button class="btn btn-primary" type="button" aria-pressed="false">
                Product 3
            </button>

            <button class="btn btn-primary" type="button" aria-pressed="false">
                Product 4
            </button>

            <button class="btn btn-primary" type="button" aria-pressed="false">
                Product 5
            </button>
        </div>
    </body>
    </html>

Ответ №1:

Вау, весь этот код для достижения этого!! вы уже используете jQuery, так почему бы вам не попробовать что-то подобное (удалите весь свой код javascript и замените его этим):

 <script type="text/javascript">
    $(document).ready(function () {
        $("#containerDiv .btn").click(function () {
            $("#containerDiv .btn").attr("aria-pressed", false)
            $("#containerDiv .btn").removeClass("active")
            $(this).attr("aria-pressed", true)
            $(this).addClass("active")
        });
    });
</script>