JSFiddle

Question

如果这是重复我道歉，我意识到这是相当广泛的。我在尝试理解如何处理以下问题时遇到了一些麻烦：

我想定义一个数值，并允许用户单击复选框，表示多个边和相应的边。现在，在每个连续的一侧点击之后，该值（边数）将减少并在网页中显示更新的数量。

我该如何解决这个问题！在jquery中定义所有变量等，然后创建函数以检查是否已单击复选框，然后通过更新来减少变量。但是在这之后我怎样才能在html部分实际使用这个变量来显示剩余的边数？据我所知，html并没有真正的变量。对不起，如果这让我感到困惑，我是网络编程的新手

Answer 1

您可以在网页中存储数据，方法是将其作为字符串存储在属性中或元素中。

但是，在许多情况下，最好只保留JavaScript中的变量，然后返回它们的类型。

var x = 5;

document.getElementById('example').setAttribute('data-var-x', x);

var y = document.getElementById('example').getAttribute('data-var-x');

在上面的示例中，使用x表示您的号码为5，而使用y表示您拥有字符串"5"。您需要将其解析为数字才能正确使用...例如使用此slacker parsing：

var y = +document.getElementById('example').getAttribute('data-var-x');

或者您可以使用parseInt（无聊！）

var y = parseInt(document.getElementById('example').getAttribute('data-var-x'), 10);

Answer 2

正确，您将无法单独使用HTML，您可以使用jQuery定义一个变量，该变量可以是用户可以选择的边数，然后每次单击一个复选框时减少该变量（或者如果他们取消选择就增加。）

这是一个简单的示例，可以让您开始使用，您也可以对此进行扩展，以防止用户在选择了有限数量的边数后再检查任何方框。

$(document).ready(function() {
    var sidesRemaining = 3;
    $('.sidesRemaining').html(sidesRemaining);
    $('input[type="checkbox"]').click(function() {
       if ($(this).is(':checked')) {
           // Decrease total by 1
           sidesRemaining -= 1;
       } else {
           // Increase total by 1
           sidesRemaining += 1;
       }
       $('.sidesRemaining').html(sidesRemaining);
    });
});

网页中的数值

2 个答案:

JSFiddle