在 ASP.NET MVC 视图中切换 aria-pressed=true/false 引发错误

Question

I have to toggle .active class of bootstrap and aria-pressed=true/false to handle accessibility in asp.net MVC view while I click on a button.我必须在单击按钮时切换.active类的引导程序和aria-pressed=true/false以处理 asp.net MVC 视图中的可访问性。 I have set .active and aria-pressed to true for the clicked button and false for rest of the buttons.对于单击的按钮，我已将 .active 和 aria-pressed 设置为 true，其余按钮的设置为 false。 I have done the following code to change the CSS className and attribute.我已经完成了以下代码来更改 CSS className 和属性。 The CSS class .active works fine but I receive an error as CSS 类 .active 工作正常，但我收到一个错误

"Uncaught TypeError: Cannot read property 'setAttribute' of undefined at HTMLButtonElement." “未捕获的类型错误：无法读取 HTMLButtonElement 处未定义的属性‘setAttribute’。”

Could you please help me to resolve the error?你能帮我解决这个错误吗？

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

Answer 1

Wow, all that code to achieve that!!哇，所有实现这一目标的代码！ you are already using JQuery, so why don't you try something like this (remove all you javascript code and replace it with this):您已经在使用 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>

在 ASP.NET MVC 视图中切换 aria-pressed=true/false 引发错误

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-03-15 15:02:13

在 ASP.NET MVC 视图中切换 aria-pressed=true/false 引发错误

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-03-15 15:02:13

解决方案1
1 已采纳 2019-03-15 15:02:13