Question

我正在尝试更新图例标记中的字段集标记中的span标记。我们的想法是在选择组件时更新软件项的成本。如果我只有一个软件项目（例如 - Visual Studio 2008 Pro $ 2800），下面的代码工作正常，但如果我在另一个字段集中添加第二个项目，那么当我尝试更新该字段集的范围时，它会更新包含我的Visual Studio软件的fieldset。我有什么想法吗？

<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>

Answer 1

标记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);
    });

使用JQuery更新span标记值

1 个答案: