Actualizar el valor de la etiqueta span con JQuery

Estoy intentando actualizar una etiqueta span que está en una etiqueta fieldset que está en una etiqueta de leyenda. La idea es actualizar el costo de un artículo de software a medida que se seleccionan los componentes. El código siguiente funciona bien si solo tengo un elemento de software (por ejemplo, Visual Studio 2008 Pro $ 2800), pero si agrego un segundo elemento en otro fieldset, cuando trato de actualizar el lapso para ese campo, actualiza el lapso de el fieldset que contiene mi software Visual Studio. ¿Alguna idea de lo que estoy haciendo mal?Actualizar el valor de la etiqueta span con 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>

Fuente

2009-04-09 Russ Clark

Las identificaciones de etiqueta deben ser exclusivas. Está actualizando el lapso con ID 'ItemCostSpan' de los cuales hay dos. Dale una clase al tramo y consíguelo usando 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); 
    });

Fuente

2009-04-09 18:57:28 KingErroneous

Gracias funcionó muy bien! –

Actualizar el valor de la etiqueta span con JQuery

Respuesta

Cuestiones relacionadas