无法删除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");
        }
    }
});

}

当我在调试会话期间将鼠标悬停在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中删除任何类.removeClass('bc_nav');

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

谢谢你的帮助。

Answer 1

它看起来像一个范围问题。 您正在使用THIS执行您自己找不到的查找。 您的.bc_nav实际上是您的#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的子级，因此无法正常工作。

Answer 2

如果您要清空类属性，请使用：

 $('#myElementID').removeAttr('class'); 

或这个

 $('#myElementID').attr('class', ''); 

要删除特定的类，您必须使用类名称：

 $('#myElementID').removeClass('myClassName'); 

另外，FWIW在else语句中，此行

 bcMain.removeClass("bc_nav");

是没有意义的，因为它紧随其后

 bcMain.addClass("bc_nav enabled span");