Числовые значения на веб-странице

Question

Прошу прощения, если это дубликат, и я понимаю, что это довольно широкий. У меня возникли проблемы с попыткой понять, как я буду обращаться к следующему:

Я хочу определить числовое значение и позволить пользователю щелкнуть флажки для нескольких сторон и соответствующих сторон. Теперь, после того как каждая последующая сторона нажала, значение (количество сторон) уменьшится и отобразит обновленную сумму на веб-странице.

Как бы я это сделал! Определите все переменные и т. Д. В jquery, затем создайте функции, чтобы проверить, были ли эти флажки нажаты, а затем уменьшите переменную, обновив ее. Однако после этого, как бы я использовал эту переменную в части (-ях) html, чтобы отобразить оставшееся количество сторон? Насколько я понимаю, в html нет переменных. Извините, если это сбивает с толку. Я новичок в веб-программировании.

Answer 1

Правильно, вы не будете можно сделать это только в 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

Answer 2

может хранить данные на веб-странице, сохраняя их как строку в атрибуте или внутри элемента.

Во многих случаях, однако, лучше просто держать переменные в 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);