使用 JQuery 更新 span 标签值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/735359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Update span tag value with JQuery
提问by Russ Clark
I'm trying to update a span tag that is in a fieldset tag that is in a legend tag. The idea is to update the cost of a Software Item as components are selected. The code below works fine if I only have one software item (e.g. - Visual Studio 2008 Pro $2800), but if I add a second item in another fieldset, then when I try to update the span for that fieldset, it updates the span for the fieldset containing my Visual Studio Software. Any ideas what I'm doing wrong?
我正在尝试更新位于图例标记中的字段集标记中的跨度标记。这个想法是在选择组件时更新软件项目的成本。如果我只有一个软件项目（例如 - Visual Studio 2008 Pro $2800），下面的代码工作正常，但是如果我在另一个字段集中添加第二个项目，那么当我尝试更新该字段集的跨度时，它会更新跨度包含我的 Visual Studio 软件的字段集。任何想法我做错了什么？
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("li").click(function() {
var itemCost = 0;
$("legend").each(function() {
var SoftwareItem = $(this).text();
itemCost = GetItemCost(SoftwareItem);
$("input:checked").each(function() {
var Component = $(this).next("label").text();
itemCost += GetItemCost(Component);
});
$("#ItemCostSpan").text("Item Cost = $ " + itemCost);
});
function GetItemCost(text) {
var start = 0;
start = text.lastIndexOf("$");
var textCost = text.substring(start + 1);
var itemCost = parseFloat(textCost);
return itemCost;
}
});
});
</script>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<fieldset>
<legend>Visual Studio 2008 Pro 00</legend>
<ul class="AspNet-CheckBoxList-RepeatDirection-Vertical">
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1 $("legend").each(function() {
var SoftwareItem = $(this).text();
itemCost = GetItemCost(SoftwareItem);
$("input:checked").each(function() {
var Component = $(this).next("label").text();
itemCost += GetItemCost(Component);
});
$(this).find(".ItemCostSpan").text("Item Cost = $ " + itemCost);
});
" value="first1" />
<label for="CheckBoxList1_0">Software Assurance 0.00</label>
</li>
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1" value="second2" />
<label for="CheckBoxList1_1">Another Component 5.25</label>
</li>
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBox1" type="checkbox" name="CheckBoxList1" value="second2" />
<label for="CheckBoxList1_1">A Second Component .25</label>
</li>
</ul>
<span id="ItemCostSpan" style="background-color:White"> </span>
</fieldset>
<fieldset>
<legend>Visio 2008 Pro 5</legend>
<ul class="AspNet-CheckBoxList-RepeatDirection-Vertical">
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBox2" type="checkbox" name="CheckBoxList1##代码##" value="first1" />
<label for="CheckBoxList1_0">Software Assurance .00</label>
</li>
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBox3" type="checkbox" name="CheckBoxList1" value="second2" />
<label for="CheckBoxList1_1">Another Component .55</label>
</li>
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBox4" type="checkbox" name="CheckBoxList1" value="second2" />
<label for="CheckBoxList1_1">A Second Component .25</label>
</li>
</ul>
<span id="ItemCostSpan" style="background-color:White"></span>
</fieldset>
<span id="TotalCostSpan" style="background-color:White"></span>
</form>
回答by KingErroneous
Tag ids must be unique. You are updating the span with ID 'ItemCostSpan' of which there are two. Give the span a class and get it using find.
标签 ID 必须是唯一的。您正在使用 ID 'ItemCostSpan' 更新跨度，其中有两个。给 span 一个类并使用 find 获取它。
##代码##