jquery - 选项卡不适用于生成的服务 ID

Question

我有这个 jQuery 文件

   jQuery(document).ready(function() {        
     var orderId= <%= OrderLi.ClientID %>;

    jQuery("#ApprovalTab").css("display", "block");
    jQuery("#ApprovalLi").css("background-color", "#5EA8DE");
    jQuery("#ApprovalLi a").css("color", "#FFF");
    jQuery("#OrdersTab").css("display", "none");
    jQuery("#ApprovalLi a").css("border-bottom", "3px #5EA8DE solid");

    jQuery("#ApprovalLi").click(function() {
        jQuery("#ApprovalTab").css("display", "block");
        jQuery("#ApprovalLi").css("background-color", "#5EA8DE");
        jQuery("#ApprovalLi a ").css("color", "#FFF");
        jQuery("#orderId a").css("color", "black");
        jQuery("#Arrow").css("margin-left", "15px");
        jQuery("#ApprovalLi a").css("border-bottom", "3px #5EA8DE solid");
        jQuery("#orderId a").css("border-bottom", "3px #D8D9DC solid");
        jQuery("#orderId").css("background-color", "#F0F1F4");
        jQuery("#OrdersTab").css("display", "none");

    });

    jQuery("orderId").click(function() {
        jQuery("#ApprovalTab").css("display", "none");
        jQuery("#OrdersTab").css("display", "block");
        jQuery("#Arrow").css("margin-left", "112px");
        jQuery("#orderId").css("background-color", "#5EA8DE");
        jQuery("#orderId a").css("border-bottom", "3px #5EA8DE solid");
        jQuery("#ApprovalLi a").css("border-bottom", "3px #D8D9DC solid");
        jQuery("#ApprovalLi").css("background-color", "#F0F1F4");
        jQuery("#orderId a").css("color", "#FFF");
        jQuery("#ApprovalLi a").css("color", "black");


    });

    jQuery("#orderId").hover(function() {
        jQuery("#orderId a").css("border-bottom", "3px #5EA8DE solid");
    });

    jQuery("#ApprovalLi").hover(function() {
        jQuery("#ApprovalLi a").css("border-bottom", "3px #5EA8DE solid");
    });
  });

应用于此:

<ul class="etabs">
<li id="ApprovalLi"><a href="#stopAtTop">Approval </a></li>
<li id="OrderLi" runat="server"  ><a href="#stopAtTop">Orders</a></li>
</ul>

如果我不使用 runat="server"代码工作得很好，但是当我使用它时，代码不会呈现。我在互联网上搜索过一些东西，但我唯一发现的是“ID 正在改变”。我已经知道了，您可以在上面的 jQuery 中看到我正在使用服务器 ID。

顺便说一句:我知道我可以优化上面的代码，但我希望它首先运行。

还有什么问题？

谢谢。

Answer 1

您使用以下方法将变量 orderId 设置为 ClientID:

var orderId= <%= OrderLi.ClientID %>;

不过，ClientID 的值需要用引号括起来以使其成为字符串文字(最初错过了这一点，感谢 Yuriy)，否则这本身会导致问题:

var orderId= '<%= OrderLi.ClientID %>';

但似乎根本没有使用它，而是尝试使用其他两种方法访问一些 orderId 东西，这两种方法都在 jQuery 选择器中使用硬编码字符串文字:

 jQuery("orderId")

和

 jQuery("#orderId")

现在第一个是寻找一个元素(或者更确切地说是 orderId 的所有元素)，第二个是寻找标识符为 "orderId" 的元素。因此，您的代码在没有 runat="server" 的情况下正常工作完全是偶然的，并且似乎在添加 runat="server ".

你想要的是实际使用你的变量:

jQuery(orderId)

更准确地说，假设您在选择器中使用标识符:

jQuery("#" + orderId)

用散列而不是每次使用(取决于总使用量)为变量值添加前缀可能更有用。