2009-04-09 7 views
17

Ich versuche ein Span-Tag zu aktualisieren, das sich in einem Feldsatz-Tag befindet, das sich in einem Legenden-Tag befindet. Die Idee besteht darin, die Kosten eines Softwareelements zu aktualisieren, wenn Komponenten ausgewählt werden. Der Code unten funktioniert gut, wenn ich nur ein Softwareelement habe (zB - Visual Studio 2008 Pro $ 2800), aber wenn ich ein zweites Element in einem anderen fieldset hinzufüge, dann wenn ich versuche, den Bereich für dieses fieldset zu aktualisieren, aktualisiert es den Bereich für das Fieldset, das meine Visual Studio Software enthält. Irgendwelche Ideen, was ich falsch mache?Aktualisiere Span-Tag-Wert mit 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> 

Antwort

32

Tag-IDs müssen eindeutig sein. Sie aktualisieren den Bereich mit der ID 'ItemCostSpan', von dem es zwei gibt. Gib der Spanne eine Klasse und hol sie mit 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); 
    }); 
+0

Danke das hat super funktioniert! –

Verwandte Themen