用JQuery更新SPAN标记值

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (41)

我正在尝试更新位于图例标记中的字段集标记中的跨度标记。这个想法是在选择组件时更新软件项目的成本。如果我只有一个软件项目,下面的代码工作正常,但如果我在另一个字段集中添加第二个项目,则当我尝试更新该字段集的跨度时,包含我的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>
提问于
用户回答回答于

标记ID必须是唯一的。你正在使用ID“ItemCostSpan”更新SPAN,其中有两个ID。给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);
    });

热门问答

腾讯云GPU服务器不能联外网吗?

小爱同学

腾讯云 · 技术支持 (已认证)

推荐
腾讯云GPU服务器可连外网,GPU 云服务器提供和标准CVM 云服务器一致的方便快捷的管理方式。 图片.png GPU云服务器作为CVM云服务器的一类特殊实例,购买、 操作、维护等方式与CVM云服务器一致 图片.png GPU 云服务器(GPU Cloud Computin...... 展开详请

win服务器怎么给文件夹配置755权限?

推荐
下面以腾讯云win服务器(Windows Server 2016 数据中心版 64位中文版)为文件夹配置755权限为例 1.右击【属性】 图片.png 2 .选择【安全】- 【编辑】 图片.png 3. 可对当前文件进行755权限配置 图片.png 要修改某个文件的权...... 展开详请

腾讯云sdk 兼容JDK6?

推荐

如果你说的是https://cloud.tencent.com/document/sdk/Java的话,jdk最低版本是1.7,不支持1.6

android 离线推送 为什么setOfflinePushListener不回调?

嗨喽你好摩羯座
推荐
您好,使用云通信 IM SDK 的通知栏提醒,建议参考:https://cloud.tencent.com/document/product/269/9234 中的描述来操作,通知栏提醒的内容由类 TIMOfflinePushNotification 来定义,可以通过这个类对外...... 展开详请

为什么cmq的topic配置订阅者为queue,向topic发送消息无法到达queue?

是的, 向topic发送消息应该会立即投递到订阅者。您可以检查您配置的队列名称是否正确且是真实存在的队列。如还不能解决您的问题,您可以点击控制台右上角的“工单”,进行问题进一步的排查,腾讯云会有专业的售后24小时为您服务。

脏字过滤只支持 TIMTextElem 消息,对自定义消息无效,请问有接口可以主动检查吗?

学生路人
推荐
您好,脏字检查的内容包括单聊和群组消息(只检查文本消息 TIMTextElem,不支持对自定义消息 TIMCustomElem 的过滤)、群名片、群组资料(群名称、群简介、群公告)用户资料和好友关系链中 bytes 类型的数据(如昵称、好友备注和好友分组等)。目前没有这样的接口喔...... 展开详请

所属标签

扫码关注云+社区