함께 일하는 하키 팀의 통계표를 만들려고합니다. 우리는 30 발을 초과하지만 25 발 미만 만 허용하는 것과 같이 특정 범주에 대해 적중하려는 특정 메트릭이 있습니다. 우리는 3 개 미만의 페널티를 받지만 3 개 이상을 뽑고 싶습니다. 입력으로 2 개의 게임 만있는 테이블은 다음과 같습니다.
<body>
<header>2019-20 Team Stats</header>
<main>
<table class="table table-hover">
<thead>
<tr>
<th>Game</th>
<th>Score</th>
<th id="goal-f">GF</th>
<th id="goal-a">GA</th>
<th id="shot-f">Shots For</th>
<th id="shot-a">Shots Against</th>
<th>Shot %</th>
<th id="pen-t">Pen Taken</th>
<th id="pen-d">Pen Drawn</th>
<th>PP %</th>
<th>PK %</th>
<th id="fo-p">Face-offs</th>
<th>Hits</th>
<th id="blk">BS</th>
<th id="take-a">TA</th>
<th id="odd-man">OMA</th>
<th id="eozp">Extended OZP</th>
<th id="chance-f">CF</th>
<th id="chance-a">CA</th>
<th>Chance +/-</th>
<th id="turn-o">TO</th>
</tr>
</thead>
<tbody>
<tr>
<td>10/11/19 at Boston College</td>
<td>3-5</td> <!--Score-->
<td>3</td><!--GF-->
<td>5</td><!--GA-->
<td>26</td><!--Shots For-->
<td>28</td><!--Shots Against-->
<td>.000</td><!--Shot %-->
<td class="to-num">5</td><!--Pen Taken-->
<td>4</td><!--Pen Drawn-->
<td>33%</td><!--FO%-->
<td>40%</td><!--PP%-->
<td>100%</td><!--PK%-->
<td>9</td><!--Hits-->
<td>11</td><!--BS-->
<td>7</td><!--TA-->
<td>10</td><!--OMA-->
<td>0</td><!--OZP-->
<td>13</td><!--CF-->
<td>17</td><!--CA-->
<td>-4</td><!--C +/1-->
<td>12</td><!--TO-->
</tr>
<tr>
<td>10/12/19 at Merrimack</td>
<td>11-6</td> <!--Score-->
<td>11</td><!--GF-->
<td>6</td><!--GA-->
<td>26</td><!--Shots For-->
<td>22</td><!--Shots Against-->
<td>.000</td><!--Shot %-->
<td>3</td><!--Pen Taken-->
<td>6</td><!--Pen Drawn-->
<td>64%</td><!--FO%-->
<td>50%</td><!--PP%-->
<td>100%</td><!--PK%-->
<td>9</td><!--Hits-->
<td>14</td><!--BS-->
<td>6</td><!--TA-->
<td>11</td><!--OMA-->
<td>2</td><!--OZP-->
<td>22</td><!--CF-->
<td>14</td><!--CA-->
<td>+8</td><!--C +/1-->
<td>18</td><!--TO-->
</tr>
</tbody>
</table>
</main>
본질적으로 문자열에서 정수로 .to-num 클래스를 구문 분석하려고 시도한 다음 해당 정수가 <또는> 3이면 '음수'또는 '양수'클래스를 추가하면 글꼴 색상이 변경됩니다. 검정에서 빨강 또는 녹색으로.
for (var i = 0; i < $(".to-num").length; i++) {
var outcome = parseInt($(".to-num")[i]);
if (outcome > 3) {
$(".to-num").addClass("negative");
} else if (outcome < 3) {
$(".to-num").addClass("positive");
}
}
내 HTML, CSS 및 JS에 대한 CodePen은 다음과 같습니다. https://codepen.io/emilyengelnatzke/pen/qBNOQZe
동일한 요소에 클래스를 다시 설정해야합니다. 그대로 매번 모든 요소에 클래스를 설정합니다. 또한 구문 분석하기 전에 innerText 또는 textContent를 호출해야합니다.
넌 할 수있어:
$(".to-num").each(function() {
var outcome = parseInt(this.innerText);
if (outcome > 3) {
this.classList.add("negative");
} else if (outcome < 3) {
this.classList.add("positive");
}
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다