使用JQuery更新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>

解决方法

标签ID必须是唯一的。您正在更新ID为“ItemCostSpan”的跨度为两个。给span一个类，并使用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更新span标签值

解决方法

相关推荐