1

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

第 1 队：+ / -，第 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 来做，所以请只使用香草 JavaScript。

4

2 回答 2

1

我会做这样的事情：

现场演示

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"）。

这两个参数是您立即更新dataObject（保存游戏统计数据）并将屏幕上的更改应用于目标 SPAN 所需的全部内容ID。

于 2013-10-28T23:14:20.347 回答
0

将<a href="#" onclick="" ></a>标签内的onclick属性设置为调用increaseScore等函数：

 onclick="increaseScore()"

并给 span 元素一个 id：

 <span id="myScore">

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

 function increaseScore()
 {
 score1++;
 document.getElementById("myScore").innerHTML=score1;
 }
于 2013-10-28T20:52:38.570 回答