2

我是 jquery 的菜鸟（对于“菜鸟”，我的意思是“我几个小时前开始使用 jquery”）。我想做的很简单：在选中复选框时向变量添加一个值，如果未选中复选框，则恢复同一变量的先前值。该值必须写在文档的范围内。我写的代码有两个问题：

1-当我取消选中复选框时，值不会恢复；

2-我希望该值始终显示在文档中，即使是在第一次加载页面时，我也不知道该怎么做（现在它出现在第一次点击后，因为它写在 if 条件中）

这是脚本：它有什么问题？

<script type="text/javascript">
    var pds1=0;
    $(document).ready(function() {
        $("#mat1").click(function() {
            if($('#mat1').is(':checked')) { 
                pds1=pds1+10;
                $('#perk1').html(pds1);
            } 
            else {
                if(pds1>0)
                {
                    pds1=pds1-10;
                }
                else {}
            }
        });
    });
</script>

这是HTML：

<input id="mat1" type="checkbox" /> <span id="perk1"></span>
4

2 回答 2

1

无论选中还是未选中，您都必须更新跨度。您的代码如下所示：

var pds1 = 0;
$(document).ready(function () {
    $('#perk1').html(pds1);

    $("#mat1").click(function () {
        if ($('#mat1').is(':checked')) 
           pds1 = pds1 + 10;
        else if (pds1 > 0) 
           pds1 = pds1 - 10;
        $('#perk1').html(pds1);
    });
});

jsFiddle：http: //jsfiddle.net/eHasK/2/

于 2012-07-28T18:58:35.733 回答
1

所以，你追求两件事：

  1. 页面加载时显示变量的初始值
  2. 未选中该框时显示更新的值。

见下文：

<script type="text/javascript">
var pds1=0;
$(document).ready(function() {
    $('#perk1').html(pds1); // Display initial value on page load
    $("#mat1").click(function() {
        if($('#mat1').is(':checked')) { 
            pds1=pds1+10;
            $('#perk1').html(pds1);
        } else {
        if(pds1>0)
        {
            pds1=pds1-10;
            $('#perk1').html(pds1); // Display updated value on uncheck
        }
        else {}
        }
    });
});
</script>

您可能还对数据绑定框架感兴趣，例如 Knockout

http://knockoutjs.com/documentation/introduction.html

于 2012-07-28T19:02:29.947 回答