Question

我有一些奇怪的行为，我找到了一个workround，但想了解发生了什么。

网站：使用ASP（V4）; JQuery的（1.7.1）; Firefox（10.0.2）;

页面上有两个标签：

<asp:Label ID="errsOnlyResult" runat="server" Text="<p>errsOnlyResult" ></asp:Label>
<asp:Label ID="fullCodeResult" runat="server" Text="<p>fullCodeResult" ></asp:Label>

后面的服务器端代码将为这两个标签分配文本。

页面有一个复选框，我想用它来切换显示哪些标签。即：当选中想要显示标签ID =“errsOnlyResult”时，隐藏ID =“fullCodeResult” 清除时要显示标签ID =“fullCodeResult”，ID =“errsOnlyResult”隐藏

切换是通过复选框上的jquery处理程序完成的：要执行切换的代码：

function applyShowErrOnlyCBox() {
    var checked = $("input[id$='ShowErrOnlyCBox']").is(':checked');

    if (checked) {
        console.log("JQuery ShowErrOnlyCBox click event: Checked");
        $("span[id$='errsOnlyResult']").show();
        $("span[id$='fullCodeResult']").hide();
    }
    else {
        console.log("JQuery ShowErrOnlyCBox click event: unchecked");
        $("span[id$='fullCodeResult']").show();            
        $("span[id$='errsOnlyResult']").hide();
    }
}

使用firebug逐步执行此jquery代码，它正按预期执行。

问题是两个标签都显示出来或两者都被隐藏了。我发现两者都将遵循页面布局中首先定义的隐藏/显示行为。就好像第一个样式传播到第二个样式。

请记住，asp：label呈现为span。

即页面的相关部分呈现为：

  <span id="MainContent_errsOnlyResult"><p>errsOnlyResult</span>
  <span id="MainContent_fullCodeResult"><p>fullCodeResult</span>

使用firebug逐步通过jquery库我看到会发生什么。当hide（）/ show（）应用于第一个span时，渲染的页面会更改为两个span。执行函数的顺序无关紧要。它的定义顺序定义了使用哪种样式设置。

我通过将标签（跨度）放在不同的

中解决了这个问题

即标签定义为：

<div>
<asp:Label ID="errsOnlyResult" runat="server" Text="<p>errsOnlyResult" ></asp:Label> 
</div>

<div>
<asp:Label ID="fullCodeResult" runat="server" Text="<p>fullCodeResult" ></asp:Label>
</div>

它按预期工作。

我尝试在其中添加更多asp：标签（spans），行为似乎很有意义。

似乎所有人都在

中的第一个跨度中

这是预期的行为还是我在这里误解了一些东西。因为我找到了一个工作回合并不紧急 - 但有兴趣了解为什么我需要不同的

提前感谢您的回复。

菲尔。

Answer 1

答案谢谢Archer：

分配给标签的文本没有段落终结符标签。

虽然我知道这可能是有效的HTML，但它不是有效的xml，即DOM文档无效。 JQuery库对元素结尾的位置感到困惑。我猜div工作为JQuery增加了清晰度。

解决方案代码：

取代：

<asp:Label ID="errsOnlyResult" runat="server" Text="<p>errsOnlyResult" ></asp:Label>
<asp:Label ID="fullCodeResult" runat="server" Text="<p>fullCodeResult" ></asp:Label>

与

<asp:Label ID="errsOnlyResult" runat="server" Text="<p>errsOnlyResult</p>" ></asp:Label>
<asp:Label ID="fullCodeResult" runat="server" Text="<p>fullCodeResult</p>" ></asp:Label>

原因不明的jquery span hide（）＆amp; show（）行为

1 个答案: