从代码后面读取站点地图 currentNode 到 jQuery 中的 .addClass('selected') 不会呈现，除非它是硬编码的？

Question

我有一个用户控件，它使用两个无序列表和两个 asp:Repeaters 来从 web.sitemap 文件动态构建菜单。 （http://msdn.microsoft.com/en-us/library/ aa581781.aspx#aspnet_tutorial03_masterpagesandsitenav_cs_topic5)

现在我想显示选定的 MainMenu 节点和 SubMenu 节点。

为此，我使用 jQuery 来 .addClass('selected')，以便我选择的 CSS 类可以应用于这些节点。问题：除非节点被硬编码，否则 jQuery 将不会渲染选定的 CSS？

<script >
    $(document).ready(function() {  
         String liMenuNodes = ('<%=liTitles %>').toString();
         $(liMenuNodes).addClass('selected');

         // This way works but it is hard-coded, it is my desired end result
         // $("li#liInstitutions, li#liSearchInstitutionTypes").addClass('selected');
    });
</script>

在 C# 代码隐藏中：

private string liTitleNodes = null;
    public string liTitles 
    { 
        get 
        {
            SiteMapNode currentNode = System.Web.SiteMap.CurrentNode;
            liTitleNodes = ("li#li" + currentNode.ParentNode.Title).Replace(" ", "");
            liTitleNodes += ", ";
            liTitleNodes += ("li#li" + currentNode.Title).Replace(" ", "");
            return liTitleNodes;
        }
    }

最终，我会将此代码移至 Site.Master 页面，但如果不对每个页面进行硬编码，则无法使其工作:( 我想知道该变量是否在页面生命周期中传递得太晚，但是看来情况并非如此

，谢谢 。 嘉莉

---

查看来源：

<div id="navigation">
<ul id="mainMenu">

            <li id="liHome">
                <a href="/ESP2/Default.aspx?p=1">Home</a>
                <ul class="subMenu">

                            <li id="liDashboard"><a href="/ESP2/Default.aspx">Dashboard</a></li>

                            <li id="liImpersonateUser"><a href="/ESP2/Default.aspx?p=2">Impersonate User</a></li>

                </ul>
            </li>

            <li id="liInstitutions">
                <a href="/ESP2/Institutions/SearchInstitutions.aspx?p=1">Institutions</a>
                <ul class="subMenu">

                            <li id="liSearchInstitutions"><a href="/ESP2/Institutions/SearchInstitutions.aspx">Search Institutions</a></li>

                            <li id="liSearchInstitutionTypes"><a href="/ESP2/Institutions/SearchInstitutionTypes.aspx">Search Institution Types</a></li>

                </ul>
            </li>

    <script >
    $(document).ready(function() { 
        String liMenuNodes = ('li#liInstitutions, li#liSearchInstitutionTypes').toString();
        $(liMenuNodes).addClass('selected');
    });       
    </script>

Answer 1

您在这里混合了 C# 和 JavaScript 语法：

$(document).ready(function() { 
    String liMenuNodes = ('li#liInstitutions, li#liSearchInstitutionTypes').toString();
    $(liMenuNodes).addClass('selected');
});      

JavaScript 是一种动态类型语言，您无法指定 String 类型。您也不需要 toString() 函数。以下代码有效：

$(document).ready(function() { 
    var liMenuNodes = 'li#liInstitutions, li#liSearchInstitutionTypes';
    $(liMenuNodes).addClass('selected');
});      

您可以看到它在以下 jsFiddle 中工作：

http://jsfiddle.net/JttxC/

Answer 2

您正在文档准备好之前运行 jQuery 代码。因此，您的结果将是不可预测的，并且取决于 HTML 中 HTML 元素和脚本的顺序。您应该将所有 jQuery 代码包含在 $(document).ready() 中，如下所示：

$(document).ready(function() {
    $("li#liInstitutions, li#liSearchInstitutionTypes").addClass('selected');
});