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');
    }
})

<强> Check Fiddle

可以进一步优化..

更改具有最高分数的段落的重量和颜色

1 个答案: