Question

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

1-取消选中复选框时，不会恢复该值;

2-我希望值始终显示在文档中，即使是在页面的第一次加载时我也根本不知道如何执行此操作（现在它出现在第一次单击之后，因为它写在如果条件）

这是剧本：它出了什么问题？

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

Answer 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/

Answer 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>

您可能也对数据绑定框架感兴趣，例如：敲除

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

如果选中复选框，则向变量添加值，如果未选中则恢复以前的值（jquery）

2 个答案: