javascript上でonClickを使用して変数値を増やし、HTMLフォームに新しい値を表示

Question

League of Legendsというゲームのファンサイトをコーディングしています。キャラクタービルドを作成するユーザーはスキルアイコンをクリックしてくださいそれはポイントです。 （最大30ポイント）

実際の例はここにある： http://www.solomid.net/masteries.php

は、基本的には30ポイントを持っています。スキルイメージをクリックすると、そのスキルにポイントが追加されます。

私はJS & jQueryのでは初心者ですので、私はお願いしたいと思います：

1. 私は現在のdivを作成し、それを "のonClick =" 警告（ 'Iがクリックされていますが。'）与えることができます; "パラメータを使用してdivをクリックしたときに警告するようにしました。これを少し更新する必要があります。

   1. ユーザーがdivをクリックします（たとえば、現在0/4のスキル値です）。
   2. 0が1増加します
   3. ユーザーはこれを3回繰り返しスキルに4/4ポイントを与えます。
   4. この値はPHPページに投稿する必要があるため、フォームに保存してください。
   どうすればいいですか？ jQueryでの動作の例を教えてください。

2. スキルをクリックすると、ハッシュ文字列の後にint値が生成されます。

たとえば、 ＃0332000000000000003000000000000000000000000000000

この文字列の意味は、ある [skill1_value] [skill2_value] [skill3_value] ... [skillLast_value]

をですから、このような値を参照してください場合。

30001（残りは0です）

それは意味し、ユーザーは、「最初のスキル」を3回クリックした次の3つのスキルをクリックしてくださいませんでした。 5番目のスキルを1回クリックします。

すべての単一フォーム値をPHPに送信するのではなく、ハッシュ文字列の整数値のみを送信します。残りの計算はPHPで行います。

TL; DRバージョン

1. は3倍のdivを想像してみてください。 （div1、div2、div3）
2. 画面に表示される数値を含む各divを想像してみてください。 （val1、val2、val3）
3. デフォルトでは、すべての値は0です。
4. div1をクリックすると、val1の値を1増やす必要があります。div2をクリックするとval2の値を1増やすなどのようにします。
5. 新しい値は常にHTML出力で表示する必要があります。 6ユーザーが[保存]をクリックすると、次のような文字列が生成されます。 （val1 + val2 + val3 ...）（e。g 716）

ご協力いただきまして誠にありがとうございます。私はそれが初心者の質問であることを知っているので、記事へのリンクも役立ちます。 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 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('-')); 
}); 

EDIT：明快

Answer 2

はここで働い例です。

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（スキル）と数字の配置（インデックス）の間のどこかにマッピングを維持する必要があります。

1桁に制限されているため、スキルレベルが0..9の間にしか設定できないという制限もあります。