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

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

javascript jquery asp.net-mvc

Javascript 在ASP.NET MVC视图中切换aria pressed=true/false引发错误,javascript,jquery,asp.net-mvc,Javascript,Jquery,Asp.net Mvc,我必须切换引导类的.active和aria pressed=true/false来处理asp.net MVC视图中的可访问性，同时单击按钮。我已经为单击的按钮将.active和aria设置为true，为其余按钮设置为false。我已经完成了以下代码来更改CSS类名和属性。CSS class.active工作正常，但我收到一个错误未捕获的TypeError:无法读取未定义的属性'setAttribute' 在HTMLButtoneElement。” 你能帮我解决这个错误吗 @{ Layo

我必须切换引导类的.active和aria pressed=true/false来处理asp.net MVC视图中的可访问性，同时单击按钮。我已经为单击的按钮将.active和aria设置为true，为其余按钮设置为false。我已经完成了以下代码来更改CSS类名和属性。CSS class.active工作正常，但我收到一个错误

未捕获的TypeError:无法读取未定义的属性'setAttribute' 在HTMLButtoneElement。”

你能帮我解决这个错误吗

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

@{
布局=空；
}
我的测试
@style.Render（“~/Content/css”）
@Scripts.Render（“~/bundles/modernizer”）
@Scripts.Render（“~/bundles/jquery”）
@Scripts.Render（“~/bundles/bootstrap”）
$（文档）.ready（函数（）{
var btnContainer=document.getElementById（“containerDiv”）；
//获取容器内class=“btn”的所有按钮
var btns=btnContainer.getElementsByClassName（“btn”）；
//循环浏览按钮并将活动类添加到当前/单击的按钮
对于（变量i=0；i0）{
当前[0]。className=current[0]。className.replace（“活动的”）；
当前[0]。setAttribute（“已按下”、“错误”）；
}
//将活动类添加到当前/单击的按钮
this.className+=“活动”；
setAttribute（“aria pressed”、“true”）；
});
}
});
产品1
产品2
产品3
产品4
产品5

哇，所有这些代码都是为了实现这一点！！您已经在使用JQuery了，为什么不试试这样的方法（删除所有javascript代码并用以下代码替换）：


$（文档）.ready（函数（）{
$（“#containerDiv.btn”）。单击（函数（）{
$（“#containerDiv.btn”）.attr（“aria按下”，假）
$（“#containerDiv.btn”）.removeClass（“活动”）
$（this.attr（“aria pressed”，true）
$（此）.addClass（“活动”）
});
});

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