30001（其余为0）

Question

我正在编写一个名为League of Legends的游戏的粉丝网站，我的用户想要创建角色版本，应点击技能图标并给它一点。（最多30分）

这里有一个实例： http://www.solomid.net/masteries.php

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

因为我是JS＆amp; amp;的初学者jQuery，我想问一下：

我现在可以创建一个div并给它“onClick =”警告（'我被点击。'）;“参数以便当有人点击div时它会发出警告。我需要稍微更新一下，让我们说：
1. 用户点击div。（例如，假设它当前是0/4技能值）
2. 0增加1，变为1/4。
3. 用户重复3次，获得4/4分技能。
4. 此值应发布到PHP页面，因此保存为表单。
我怎样才能做到这一点？能否请举例说明它在jQuery中的工作原理？
如您所见，当您点击技能时，它会在哈希字符串后生成一个int值。

例如; ＃0332000000000000003000000000000000000000000000000

这个字符串的含义是， [skill1_value] [skill2_value] [skill3_value] ... [skillLast_value]

所以，如果你看到这样的值;

30001（其余为0）

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

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

TL; DR版本

想象一下3x div。（div1，div2，div3）
想象一下每个div在屏幕上包含可见的数字值。（val1，val2，val3）
默认情况下，所有值均为0.
如果单击div1，则val1值应增加1.如果单击div2，则val2值应增加1，依此类推。
新值应始终显示在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

以下是一个有效的例子：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);
    });
});

不是解释每一部分，而是让我知道你有什么问题。

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

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

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

还有一个限制，即只能在0到9之间获得技能等级，因为你只能限制一个数字。

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

30001（其余为0）

4 个答案: