使用JQuery更新跨度标记值 [英] Update span tag value with JQuery
问题描述
我试图更新位于图例标签中的字段集标签中的span标签。这个想法是在选择组件时更新软件项目的成本。下面的代码工作正常，如果我只有一个软件项目（例如 - Visual Studio 2008 Pro $ 2800），但如果我在另一个字段集中添加第二个项目，那么当我尝试更新该字段集的跨度时，该字段包含我的Visual Studio软件。任何想法我做错了什么？
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?
<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 $2800</legend>
<ul class="AspNet-CheckBoxList-RepeatDirection-Vertical">
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" value="first1" />
<label for="CheckBoxList1_0">Software Assurance $300.00</label>
</li>
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" value="second2" />
<label for="CheckBoxList1_1">Another Component $255.25</label>
</li>
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBox1" type="checkbox" name="CheckBoxList1$1" value="second2" />
<label for="CheckBoxList1_1">A Second Component $15.25</label>
</li>
</ul>
<span id="ItemCostSpan" style="background-color:White"> </span>
</fieldset>
<fieldset>
<legend>Visio 2008 Pro $415</legend>
<ul class="AspNet-CheckBoxList-RepeatDirection-Vertical">
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBox2" type="checkbox" name="CheckBoxList1$0" value="first1" />
<label for="CheckBoxList1_0">Software Assurance $40.00</label>
</li>
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBox3" type="checkbox" name="CheckBoxList1$1" value="second2" />
<label for="CheckBoxList1_1">Another Component $25.55</label>
</li>
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBox4" type="checkbox" name="CheckBoxList1$1" value="second2" />
<label for="CheckBoxList1_1">A Second Component $10.25</label>
</li>
</ul>
<span id="ItemCostSpan" style="background-color:White"></span>
</fieldset>
<span id="TotalCostSpan" style="background-color:White"></span>
</form>
推荐答案
标签ID必须是唯一的。您正在更新ID为'ItemCostSpan'的范围，其中有两个。
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.
$("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);
});
这篇关于使用JQuery更新跨度标记值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
