Подтвердить что ты не робот

Обновить значение тега span с помощью JQuery

Я пытаюсь обновить тег span, который находится в теге fieldset, который находится в теге легенды. Идея состоит в том, чтобы обновить стоимость Программного элемента по мере выбора компонентов. Код ниже работает отлично, если у меня есть только один элемент программного обеспечения (например, - Visual Studio 2008 Pro $2800), но если я добавлю второй элемент в другой набор полей, тогда, когда я пытаюсь обновить диапазон для этого набора полей, он обновляет диапазон для набор полей, содержащий мое программное обеспечение Visual Studio. Любые идеи, что я делаю неправильно?

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

Ответ 1

Идентификаторы тегов должны быть уникальными. Вы обновляете интервал с идентификатором ItemCostSpan, из которого их два. Дайте span класс и получите его с помощью 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);
    });