当 <td> 是字符串的一部分时，根据条件尝试 add/change class 在 <td> 标签中

Question

当标签是 coffeeScript 中字符串的一部分时，我如何根据条件更改 class：

rows+= "<tr class='row'>" + 
         "<td class='name'>" + awayTeam + "</td>" +
         "<td class='score'>" + aScore + "</td>" +
         "<td class='name'>" + homeTeam + "</td>" +
         "<td class='score'>" + hScore + "</td>"  +
         "<td class='period'>" + currentPeriod + "</td>" +
       "</tr>"


table = "<table class='data'>" + rows + "</table>"

return table

如果 aScore > hScore，如何将 class='name' 更改为 class='winning'？

我试过了....

"<td class="${(aScore>hScore) ? 'winning' : 'name'}">" + awayTeam + "</td>"

但是得到一个意外的标识符错误。

如有任何帮助，我们将不胜感激。

Answer 1

你可以使用这个：你必须分别 select ascore 和 hscore 来比较值，所以我将它们的 class 名称更改为 score-ascore 和 score-hscore.

条件发生后将 name class 更改为 winning。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
</body>

<script type="text/javascript">
  $(document).ready(function(){
      $('body').html(create())
      var ascore = $('.score-ascore').text()
      var hscore = $('.score-hscore').text()
      if(aScore>hScore){
        var element = $("td.name")
        element.addClass("winning")
        element.removeClass("name")
      }

  })

  function create(){
    awayTeam = 10
    aScore = 10
    homeTeam = 10
    hScore = 9
    currentPeriod = 10
    rows = 10
    rows+= '<tr class="row">' + 
         '<td class="name">' + awayTeam + '</td>' +
         '<td class="score-ascore">' + aScore + '</td>' +
         '<td class="name">' + homeTeam + '</td>' +
         '<td class="score-hscore">' + hScore + '</td>'  +
         '<td class="period">' + currentPeriod + '</td>' +
       '</tr>'
      table = '<table class="data">' + rows + '</table>'
      return table
  }
</script>
</html>

Answer 2

期望 aScore 和 hScore 为整数。那么这应该可以工作，

var res_class = ( aScore > hScore ) ? 'winning' : 'name';

rows+= "<tr class='row'>" + 
         "<td class='"+res_class+"'>" + awayTeam + "</td>" +
         "<td class='score'>" + aScore + "</td>" +
         "<td class='name'>" + homeTeam + "</td>" +
         "<td class='score'>" + hScore + "</td>"  +
         "<td class='period'>" + currentPeriod + "</td>" +
       "</tr>";
table = "<table class='data'>" + rows + "</table>";

return table

当 <td> 是字符串的一部分时，根据条件尝试 add/change class 在 <td> 标签中

Trying to add/change a class within a <td> tag based on condition when the <td> is part of a string

javascript

css

coffeescript