JQueryでスパンタグ値を更新

凡例タグにあるフィールドセットタグにあるスパンタグを更新しようとしています。このアイデアは、コンポーネントが選択されるときにソフトウェアアイテムのコストを更新することです。以下のコードは、1つのソフトウェアアイテム（Visual Studio 2008 Pro $ 2800など）しか持っていないとうまくいきますが、別のフィールドセットに2番目のアイテムを追加すると、そのフィールドセットのスパンを更新しようとすると、フィールドセットには私の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は一意である必要があります。 2つの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

ありがとうございました！ –

JQueryでスパンタグ値を更新

答えて

関連する問題