Question

我有一个用户控件，它使用两个无序列表，里面有两个asp：Repeater，可以从web.sitemap文件中动态构建菜单。（http://msdn.microsoft.com/en-us/library/aa581781.aspx#aspnet_tutorial03_masterpagesandsitenav_cs_topic5）

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

为此，我使用jQuery to .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

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

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

Answer 2

您在这里混合使用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/

除非硬编码，否则将jQuery中的站点映射currentNode从代码隐藏到.addClass（'selected'）不能渲染？

2 个答案: