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上时，上下文＆gt; className显示正确的类，但试图确定bc_main是否有类结果

?bcMain.hasClass('bc_nav');
false

在Visual Studio的立即窗口中。

此外，尝试确定类中的值会给我一个未定义的错误。

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

无论是否尝试.removeClass()并将其留空或尝试.removeClass('bc_nav');

，都不会从bc_main中删除任何课程

我已经检查过以确保其他地方没有任何违约行为且无法找到任何内容。

感谢您的帮助。

Answer 1

看起来像是一个范围问题。您正在使用此功能来执行您不应找到的查找。你的.bc_nav elis实际上是你的#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");

无法删除css类并添加新类

2 个答案: