在 javascript 上使用 onClick 增加变量值并在 HTML 表单上显示新值

Question

我正在为一个名为英雄联盟的游戏编写一个粉丝网站，我的用户想要创建角色构建，应该点击技能图标并给它一个分数。 （最多 30 分）

这里有一个活生生的例子： http://www.solomid.net/masteries.php

你基本上有30分。当您单击技能图像时，它会为该技能添加一个点。

由于我是 JS & jQuery 的初学者，所以想问一下：

1. 我目前可以创建一个 div 并为其提供“onClick="alert('I am clicked.');”参数，以便在有人点击 div 时发出警报。我需要稍微更新一下，比如说：

   1. 用户单击 div。 （例如，假设它当前是 0/4 技能值）
   2. 0 加 1，变为 1/4。
   3. 用户重复此操作 3 次，给予 4/4 点技能。
   4. 此值应发布到 PHP 页面，因此以表单形式保存。
   我怎样才能做到这一点？你能举个例子，它是如何在 jQuery 中工作的吗？

2. 可以看到，当你点击技能时，它会在哈希字符串之后生成一个int值。

例如； #03320000000000000003000000000000000000000000000000

这个字符串的意思是， [skill1_value] [skill2_value] [skill3_value] ... [skillLast_value]

所以如果你看到这样的值；

30001（其余为0）

这意味着，用户点击了 3 次“第一个技能”，没有点击接下来的 3 个技能。在第五个技能上点击一次。

我不会将每个表单值都发布到 PHP，而只会发布哈希字符串的整数值。其余的计算将使用 PHP 完成。

TL;DR 版本

1. 想象一下 3x 格。 (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

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

将您的技能点击存储在散列或隐藏字段中。它将以 000 的字符串开始。然后您可以根据单击的 div 增加正确的数字。

不知何故，您需要将映射保留在哈希字符串中的 div（技能）和数字位置（索引）之间。

还有一个限制，因为您只能将技能等级限制在 0..9 之间。

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

不要解释每个部分，让我知道你有什么问题。