Mise à jour de la valeur de balise span avec JQuery

J'essaie de mettre à jour une balise span qui se trouve dans une balise fieldset qui se trouve dans une balise legend. L'idée est de mettre à jour le coût d'un élément logiciel lorsque les composants sont sélectionnés. Le code ci-dessous fonctionne bien si je n'ai qu'un seul logiciel (par exemple - Visual Studio 2008 Pro $ 2800), mais si j'ajoute un second article dans un autre fieldset, alors quand j'essaye de mettre à jour le span pour ce fieldset, le fieldset contenant mon logiciel Visual Studio. Des idées de ce que je fais mal?Mise à jour de la valeur de balise span avec 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>

Source

2009-04-09 Russ Clark

Les identifiants d'étiquette doivent être uniques. Vous mettez à jour la plage avec l'ID 'ItemCostSpan' dont il existe deux. Donnez une classe à l'ensemble et utilisez la recherche.

$("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); 
    });

Source

2009-04-09 18:57:28 KingErroneous

Merci qui a bien fonctionné! –

Mise à jour de la valeur de balise span avec JQuery

Répondre

Questions connexes