Увеличение значения переменной с помощью onClick на javascript и отображение нового значения в форме HTML

Question

Я пишу фан-сайт для игры под названием League of Legends, и мои пользователи, которые хотели бы создавать билды персонажей, должны нажимать на иконки умений и давать им очки.(максимум 30 баллов)

Вот живой пример: http://www.solomid.net/masteries.php

У вас в основном 30 баллов.Когда вы нажимаете на изображение навыка, оно добавляет точку к этому навыку.

Поскольку я новичок в JS & jQuery, я хотел бы спросить:

1. В настоящее время я могу сделать div и дать ему параметр «onClick =» alert («I clicked.»); », Чтобы он предупреждал, когда кто-то щелкает div. Мне нужно немного обновить его, скажем,

   1. Пользователь щелкает дивизион (например, предположим, что в настоящее время это значение навыка 0/4)
   2. 0 увеличивается на 1, становится 1 / 4.
   3. Пользователь повторяет это 3 раза, дает 4/ 4 балла за навык.
   4. Это значение должно быть опубликовано на странице PHP, следовательно, сохранено в форме.
   Как я могу это сделать? Не могли бы вы дать мне пример, как это работает вjQuery?

2. Как вы можете видеть, когда вы нажимаете на умения, он генерирует значение int после строки хеша.

Например;# 0332000000000000003000000000000000000000000000000

Значение этой строки: [skill1_value] [skill2_value] [skill3_value] ... [skillLast_value]

Так что, если вы видите такое значение;

30001 (остальные 0)

Это означает, что пользователь 3 раза нажал на «первый навык», не щелкнувна следующих 3 навыках.Один раз щелкнул по пятому навыку.

Вместо публикации каждого значения формы в PHP, я буду публиковать только целочисленное значение строки хеша.Остальные вычисления будут выполнены с помощью PHP.

TL; DR-версия

1. Представьте себе 3x div.(div1, div2, div3)
2. Представьте, что каждый div содержит видимое числовое значение на экране.(val1, val2, val3)
3. Все значения по умолчанию равны 0.
4. Если вы нажмете на div1, значение val1 должно быть увеличено на 1. Если вы нажмете на div2, значение val2 должно бытьувеличено на 1 и т. д.
5. Новые значения всегда должны отображаться в выводе HTML.6 Когда пользователь нажимает «Сохранить», он должен генерировать строку, подобную следующей: (val1 + val2 + val3 ...) (например, 716)

Любая помощь будет принята с благодарностью.Я знаю, что это вопрос новичка, поэтому ссылки на статьи также будут полезны.

Answer 1

Вот пример с максимальными значениями и ограничением количества точек, которые вы должны использовать.

http://jsfiddle.net/2Q2SS/2/

var remaining = 5;
var MAX_VALUE = 4;
$('.clickybox').click( function(el) {
    if (remaining == 0)
        return;
    var resBox = $(this).find('.result');
    var curVal = resBox.attr('_data-value');
    if (!curVal)
        curVal = 0;
    if (curVal >= MAX_VALUE)
        return;
    curVal++;
    remaining--;
    resBox.text(curVal + '/4');
    resBox.attr('_data-value', curVal);

    alert($('.result').map(function() { 
        var s = $(this).attr('_data-value'); 
        if (s == undefined) s = '0'; 
        return s; 
    }).get().join('-'));
});

РЕДАКТИРОВАТЬ: Обновлено для ясности

Answer 2

Храните свои умения-клики в хэше или в скрытом поле.Он будет начинаться как строка 000. Затем вы можете увеличить правильную цифру в зависимости от того, на каком элементе div нажали.

Каким-то образом вам нужно будет сохранить отображение где-то между div (навыками) и размещением цифр (index) в вашей хэш-строке.

Существует также ограничение способности иметь уровень навыка между 0,9, поскольку вы ограничены только одной цифрой.

Answer 3

Во время события div'а onclick ключевое слово this по умолчанию привязано к этому элементу div, поэтому вы всегда знаете, какой div вызвал событие.Я предполагаю, что у вас есть некоторый объект JavaScript, который собирает значения, поэтому вы можете сделать что-то вроде этого:

onDivClick = function() {
    skillObj[this.id].value++;  // Increments the stored value
    this.innerHTML = skillObj.getDisplayValue(this.id);  // Updates the div text
};
div1.onclick = onDivClick;
div2.onclick = onDivClick; // Same function can be assigned to multiple divs

Детали могут измениться в вашей реализации, но это общая идея.Кнопка «Сохранить» может просто перебрать skillObj и создать строку, тогда вы можете отправить эту строку на сервер.

Я не использую jQuery, но делать что-то подобноеэто действительно не нужно.Если вам нужна конкретная помощь jQuery, вам следует задать более конкретный вопрос.

Надеюсь, это поможет.

Answer 4

Вот рабочий пример: http://jsfiddle.net/THubm/4/

И код:

$(function(){
    var numerators = $('.numerator');

    $('.title').click(function(){
        var numerator = $(this).next().children();
        var newVal = +numerator.text() + 1;
        numerator.text(newVal);

        var hash = '';
        numerators.each(function(){
            hash += $(this).text();
        });
        alert(hash);
    });
});

Вместо того, чтобы объяснять каждую часть, дайте мне знать, какие у вас вопросы.