【问题标题】:Checking multiple prices, increase total price label检查多个价格,增加总价格标签
【发布时间】:2013-09-04 12:16:39
【问题描述】:

每当用户单击复选框时,我都会尝试在我的网站上加总价格 - 使用一些 jQuery,但仅在我加总结果时才收到 $NaN。我的脚本末尾附近的警告框也显示了非常奇怪的结果(前导 0,我不知道为什么)

这是我当前的代码:

$("#AdditionalOffers").bind("click", "input:checkbox", function () {
                    var $items = $("#AdditionalOffers").find("input:checkbox:checked");
                    var $total = $("#totalPrice");
                    var cur_total = 0;

                    $items.each(function () {
                        var $this = $(this);
                        var target = $("span[class='" + $this.attr("id") + "']");
                        var item_value = +target.text()

                        cur_total += item_value;
                        alert(cur_total);
                    });

                    $total.html("$" + cur_total);
                });

因为我使用的是 .NET,所以我的标记如下所示:

<asp:CheckBox ID="CheckBox7" CssClass="label-for-check" Text="Lease/Sales Consultation" runat="server" /> <span class="CheckBox7">75</span> <br />
<asp:CheckBox ID="CheckBox1" CssClass="label-for-check" Text="Lease Review Advisor" runat="server" /> <span class="CheckBox1">50</span> <br />
<asp:CheckBox ID="CheckBox2" CssClass="label-for-check" Text="Starter Package" runat="server" /> <span class="CheckBox2">25</span> <br />

我觉得这不起作用有一个愚蠢的原因。非常感谢任何帮助!

【问题讨论】:

标签: javascript jquery asp.net checkbox


【解决方案1】:

原因是您使用的是 ASP.NET,因此 ID 是动态生成的,$this.attr("id") 返回的值与中的 span 类不同

var target = $("span[class='" + $this.attr("id") + "']");

例如,当您查找类为CheckBox7 的跨度时,但$this.attr("id") 返回类似{prefix}CheckBox7 的内容。

解决方案 1: 只需将该行替换为:

var target = $this.next();

解决方案 2:

如果您需要按类查找,请使用 id 以外的其他属性。像这样在代码隐藏中:

CheckBox7.Attributes["myspanclass"] = "CheckBox7";
CheckBox1.Attributes["myspanclass"] = "CheckBox1";
CheckBox2.Attributes["myspanclass"] = "CheckBox2";

并将该行替换为:

 var target = $("span[class='" + $this.attr("myspanclass") + "']");

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2022-11-25
    • 2015-02-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-06-06
    • 1970-01-01
    相关资源
    最近更新 更多