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?
我正在尝试更新图例标记中的字段集标记中的span标记。我们的想法是在选择组件时更新软件项的成本。如果我只有一个软件项目（例如 - 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 $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>
1 个解决方案
#1
32
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”更新范围，其中有两个。给跨度一个类并使用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);
});
#1
32
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”更新范围，其中有两个。给跨度一个类并使用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);
});