Update span tag value with JQuery

匿名 (未验证) 提交于 2019-12-03 02:56:01

问题:

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> 

回答1:

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


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!