網頁中的數值

Question

如果這是重復的話，我深表歉意。我意識到這是相當廣泛的。 我在嘗試理解以下方法時遇到了一些麻煩：

我想定義一個數值，並允許用戶單擊復選框來表示多個面和相應的面。 現在，在每個連續的邊上單擊之后，值（邊數）將減小並在網頁中顯示更新的金額。

我將如何處理！ 在jquery中定義所有變量等，然后創建函數以檢查是否已單擊復選框，然后通過更新變量來減小變量。 但是在此之后，我將如何實際在html部分中使用此變量來顯示剩余的邊數？ 據我了解，html確實沒有變量。 抱歉，這令人困惑我是Web編程的新手

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" 。 您需要將其解析為一個數字才能正確使用它……例如，使用這種松弛的解析 ：

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);
    });
});

JSFiddle