jquery - 更改得分最高的段落的粗细和颜色

Question

实现以下目标的最佳方法是什么：

为得分最高的团队制作权重：粗体 + 颜色：白色。（领带颜色/重量没有变化）

HTML

<div class="fixture">
   <div class="teams">
      <p class="item_one_215">Newcastle United</p>
      <p class="item_two_215">Tottenham Hotspur</p>
   </div>
   <div class="scores">
      <p class="item_one_215">2</p>
      <p class="item_two_215">1</p>
   </div>
</div>
<div class="fixture">
   <div class="teams">
      <p class="item_one_216">Arsenal</p>
      <p class="item_two_216">Sunderland</p>
   </div>
   <div class="scores">
      <p class="item_one_216">0</p>
      <p class="item_two_216">0</p>
   </div>
</div>

jQuery

    var teamOneGoal_215 = 2;
    var teamTwoGoal_215 = 1;

    if (teamOneGoal_215 > teamTwoGoal_215) {
        $('p.item_one_215').css("font-weight","bold").css("color","#ccc");
    }
    else if (teamOneGoal_215 === teamTwoGoal_215)
    {
        $('p.item_one_215').css("font-weight","bold").css("color","#777");
        $('p.item_two_215').css("font-weight","bold").css("color","#777");
    }
    else
    {
        $('p.item_two_215').css("font-weight","bold").css("color","#ccc");

        }

....

我已经尝试为每个团队分配特定的变量，但必须有一种更智能、更有效的方法来实现这一点。

Answer 1

试试这个

$('.teams').each(function(){
    var $this = $(this);
    var $team1 =  $this.find('p:eq(0)');
    var $team2 =  $this.find('p:eq(1)');
    var $scoresDiv = $this.next('.scores');
    var score1 =  +$scoresDiv.find('p:eq(0)').text();
    var score2 =  +$scoresDiv.find('p:eq(1)').text();

    if(score1 > score2){
        $team1.addClass('winner');
        $scoresDiv.find('p:eq(0)').addClass('winner');
    }
    else if(score2 > score1){
        $team2.addClass('winner');
        $scoresDiv.find('p:eq(1)').addClass('winner');
    }
})​

检查小提琴

可以进一步优化..