使用JQuery更新跨度標記值

我正在嘗試更新位於圖例標記中的字段集標記中的跨度標記。這個想法是在選擇組件時更新軟件項目的成本。下面的代碼工作正常，如果我只有一個軟件項目（例如 - Visual Studio 2008 Pro $ 2800），但是如果我在另一個字段集中添加第二個項目，那麼當我嘗試更新該字段集的跨度時，該字段包含我的Visual Studio軟件。任何想法我做錯了什麼？使用JQuery更新跨度標記值

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

來源

2009-04-09 Russ Clark

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

來源

2009-04-09 18:57:28 KingErroneous

非常感謝！ – 2009-04-15 13:18:46

使用JQuery更新跨度標記值

回答

相關問題