javascript - 无法删除 css 类并添加新类

Question

我有一个遍历导航栏中每个面包屑的功能，我想根据它们所在的页面更改面包屑的样式。

这是面包屑导航栏的基本 HTML

<div id="WCBar">

<div class="bc_nav current span" id="bc_main">
<a class="bc_1" id="lnkCrumb" href="javascript:__doPostBack('ctl00$breadcrumbnav1$ctl00$lnkCrumb','')"> 
<li>Account Info</li></a>
<span class="step-arrow"></span>
<input name="ctl00$breadcrumbnav1$ctl00$hdnPageName" id="hdnPageName" type="hidden" value="WCQuoteMain2.aspx">
</div>


<div class="bc_nav a" id="bc_main">
<a class="aspNetDisabled bc_2" id="lnkCrumb"> <li>Rate</li></a>
<span class="step-arrow"></span>
<input name="ctl00$breadcrumbnav1$ctl01$hdnPageName" id="hdnPageName" type="hidden" value="WCQuoteRatingV4.aspx">
</div>

<div class="bc_nav a" id="bc_main">
<a class="aspNetDisabled bc_3" id="lnkCrumb"><li>Questions</li></a>
<span class="step-arrow"></span>
<input name="ctl00$breadcrumbnav1$ctl02$hdnPageName" id="hdnPageName" type="hidden" value="questions.aspx"></div>

<div class="bc_nav last" id="bc_main">
<a class="aspNetDisabled bc_4" id="lnkCrumb"><li>Final</li></a>
<span class="step-arrow" style="background-image: none;"></span>
<input name="ctl00$breadcrumbnav1$ctl03$hdnPageName" id="hdnPageName" type="hidden" value="managesubmission.aspx"></div>

然后我在 Javascript 中调用这个函数:

function WCBar(pagename, iframepagename, currentSet) {
$('.bc_nav', $('#WCBar')).each(function () {
    iframepagename = $(this).find('input[id*="hdnPageName"]').attr('value');
    var bcMain = $(this).find('div[id*="bc_main"]');
    var lnkCrumb = $(this).find('a[id*="lnkCrumb"]');
    if (pagename == iframepagename) {
        //bcMain.addClass("current span");
        bcMain.attr("class", "current span");
        currentSet = 1;
        // notify server
        $.ajax({
            type: "POST",
            url: window.location.pathname + "/UpdateIFrameBreadcrumb",
            data: "{'pagename':'" + iframepagename + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                // alert(msg.d);
            },
            error: function (msg) {
                // alert(msg.d);
            }
        });
    }
    else {
        if (lnkCrumb[0].href.length > 1) {   //&& currentSet == 0
            //bcMain.attr("class", "bc_nav enabled span");
            bcMain.removeClass("bc_nav");
            bcMain.addClass("bc_nav enabled span");
        }
        else {
            //bcMain.attr("class", "bc_nav a");
            bcMain.removeClass();
            bcMain.addClass("bc_nav a");
        }
    }
});

当我在调试 session 期间将鼠标悬停在 bc_Main 上时，context > className 显示正确的类，但试图确定 bc_main 是否有一个类导致

?bcMain.hasClass('bc_nav');
false

在 Visual Studio 的立即窗口中。

此外，尝试确定类中的值会导致出现未定义的错误。

var x = bcMain.attr('class');
undefined

无论我尝试 .removeClass() 并将其留空还是尝试 .removeClass('bc_nav');，都不会从 bc_main 中删除任何类。

我已检查以确保其他地方没有任何默认设置并且找不到任何内容。

感谢您的帮助。

Answer 1

这看起来像是范围问题。您正在使用 THIS 来执行您不应该找到自己的查找。您的 .bc_nav el 实际上是您的 #bc_main el，因此您最好将 $(this) 视为 bcMain。我不知道你为什么要迭代 .bc_nav 和 #WCBar，看来你应该只使用 .bc_nav。

$('.bc_nav', $('#WCBar')).each(function () {
    ...
    var bcMain = $(this).find('div[id*="bc_main"]');

在这种情况下说 $(this) 等同于说 $('.bc_nav') 所以你实际上是在做 $('.bc_nav').find('div[id*="bc_main"]') ;这是行不通的，因为#bc_main 不是 .bc_nav 的 child 。