javascript - 增加按钮点击次数

Question

我正在尝试为飞盘锦标赛制作一个包含 JSON 数据的应用程序。我现在正在开发一个页面，您可以在其中查看和编辑比赛的得分。两支球队中任何一方的得分应该都有可能增加或减少。它看起来像这样:

我跳过了代码中的一些部分以使其更易于阅读。这是相关代码:

gamePage: function(data){

    var score1 = parseInt(data.team_1_score),
        score2 = parseInt(data.team_2_score);

    var html = '',

    html_pool_open = '<section class="new_page">';
    html = html + html_pool_open;

    var html_pool_top = '<div class="game">';
    html = html + html_pool_top;

    var html_team_1 = '<div class="name">'+data.team_1.name+'</div>'
             + '<div class="score score_team1">'
                + '<a href="#" onclick="" ><img src="/images/plus.png"/></a>'
                + '<span>'+score1+'</span>'
                + '<a href="#" onclick="SCORE_APP.tools.minusOne()"><img src="/images/minus.png"/></a>'
             + '</div></div>';

跨度之间的分数必须增加或减少onclick

    html = html + html_team_1;

    x$('#content').html(html);
}

我不允许使用 jQuery 来完成此操作，因此请仅使用普通 JavaScript。

Answer 1

我会做这样的事情:

<强> LIVE DEMO

var data = {
  team_1_score: 42,
  team_2_score: 6,
  team_1 : {name:'Beast Amsterdam'},
  team_2 : {name:'Amsterdam Money Gang'}
};

var SCORE_APP = {

  tools : {
    setScore : function( i, pm ){
       var currScore= parseInt( data['team_'+ i +'_score'] , 10);
       if(currScore=='0' && pm=='dn') return; // prevent -1 score
       var newScore = data['team_'+ i +'_score'] += (pm=='up'? 1 : -1);
       document.getElementById('team_'+ i +'_score').innerHTML = newScore;      
    }
  },

  game : {
    gamePage : function(data) {
      var html = '<section class="new_page">';      
      for(var i=1; i<3; i++){
          html += '<div class="game"><div class="name">'+ data['team_'+i].name +'</div>'+
            '<div class="score score_team1">'+
            '<a href="javascript:;" onclick="SCORE_APP.tools.setScore(\''+i+'\',\'up\')">'+
            '<img src="http://i.imgur.com/axk6J7M.jpg"/></a>'+
            '<span id="team_'+i+'_score">'+ data['team_'+i+'_score'] +'</span>'+
            '<a href="javascript:;" onclick="SCORE_APP.tools.setScore(\''+i+'\',\'dn\')">'+
            '<img src="http://i.imgur.com/movjGkd.jpg"/></a>'+
            '</div></div>';
      }    
      html += '</section>';
      document.getElementById('content').innerHTML = html;  
    }    
  },

  init : function(){
     this.game.gamePage(data); 
  }

};


SCORE_APP.init();

将 ID 添加到 span保持分数，并且 onclick发送到方法setScore两个参数:

• 团队编号 (i = 1||2)
• 以及我们需要应用于当前分数的数学类型_{(我使用了字符串表示 "up" 和 "dn" )。}

这两个参数是您立即保持最新 data 所需的全部内容。对象(保存游戏统计数据)并将屏幕上的更改应用到目标 SPAN ID .