Question

我试图理解为什么第一个JQuery行不会更改标签文本，而第二个JQuery行也会这样做。想法？

@Html.Label("lblTestLabel", "Old value I want replaced")


<script type="text/jscript">

    function PopulateTradeStats(result)
    {        
        $("#lblTestLabel").text('ThisWayDoes_NOT_Work');

        $("label[for='lblTestLabel']").text("ThisWayWorks!");       
    }

</script>

Answer 1

我不是ASP开发者，但似乎@Html.Label("lblTestLabel", "Old value I want replaced")只创建一个带有for属性的标签。

输出：<label for="lblTestLabel">Old value I want replaced</label>

你需要这样做才能让第一个工作

@Html.Label("Old value I want replaced", new { id = "lblTestLabel", for = "lblTestLabel" })

输出：<label id="lblTestLabel" for="lblTestLabel">Old value I want replaced</label>

然而，这可能是一个坏主意，因为大概是您还使用@Html.TextBox("lblTestLabel")或类似的HtmlHelper方法为相关属性生成表单控件，这会生成无效的html（重复id属性）并且意味着任何用于选择表单控件的javascript都不起作用

还要确保ID lblTestLabel是唯一的，因为$("#lblTestLabel")只会返回第一个匹配项（如果您有多个具有相同ID的元素）

见下面的例子：

function PopulateTradeStats(result) {
  $("#lblTestLabel").text('ThisWayDoes_NOT_Work');

  /* $("label[for='lblTestLabel']").text("ThisWayWorks!"); */
}
PopulateTradeStats();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label id="lblTestLabel" for="lblTestLabel">Old value I want replaced No.1</label>
<br>
<label id="lblTestLabel" for="lblTestLabel">Old value I want replaced No.2</label>

Answer 2

两种方式肯定都有效！

除非您的DOM中有另一个元素具有相同的ID lblTestLabel，我猜你有<input id="lblTestLabel" ...>

然后当你调用$("#lblTestLabel").text('ThisWayDoes_NOT_Work'); ID属性的选择总是只返回一个元素时，它会尝试从另一个元素而不是你想要的那个元素更改文本。

虽然这段代码$("label[for='lblTestLabel']").text("ThisWayWorks!");正在寻找一个指向lblTestLabel元素的标签，但它每次都会有效。

Answer 3

多数民众赞成因为@ Html.Label（..）创建输出为：

<label for="lblTestLabel">Old value I want replaced</label>

生成的HTMl字符串中没有id属性。你在html helper中添加了id作为html属性参数来使这个工作。

e.g. @Html.Label("..", new {id = "LabelID"})

JQuery标签改变了解

3 个答案: