Question

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

Team #1: + / -, Team #2: + / -

我从代码中跳过了一些部分，以便于阅读。这是相关的代码：

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，所以只能使用vanilla 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();

为持有分数的span添加ID，onclick向方法setScore发送两个参数：

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

这两个参数就是你需要立即跟上data对象（保持游戏统计数据）并将屏幕上的更改应用到目标SPAN ID。

Answer 2

将<a href="#" onclick="" ></a>标记内的onclick属性设置为调用诸如increaseScore之类的函数：

 onclick="increaseScore()"

并给span元素一个id：

 <span id="myScore">

然后编写一个添加分数的函数：

 function increaseScore()
 {
 score1++;
 document.getElementById("myScore").innerHTML=score1;
 }

按钮点击增加数量

2 个答案: