小贝子编程

如何在For/in循环中解析Int，然后添加一个类来更改CSS中的字体颜色



我正试图为我合作的曲棍球队创建一个统计表。对于某些类别，我们有一些想要达到的指标，例如我们想要采取>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");
}
});

实现这一点的最简单方法如下：

// select all elements with the class-name of 'to-num', and
// call jQuery's addClass() method on each element of that
// collection:
$('.to-num').addClass(function() {
// here we return a class-name as a result of this conditional
// operator; if the parsed-value of the current element's text
// is greater than 3 we return the 'negative' class-name,
// otherwise we return 'positive':
return parseInt($(this).text().trim(), 10) > 3 ? 'negative' : 'positive';
});


$('.to-num').addClass(function() {
return parseInt($(this).text().trim(), 10) > 3 ? 'negative' : 'positive';
});
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
}
tbody tr:nth-child(odd) {
background-color: #dde;
}
th,
td {
background-color: transparent;
}
td.negative {
color: red;
}
td.positive {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h1>2019-20 Team Stats</h1>
</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><time date="2019-10-11">10/11/19</time>
<span class="location">Boston College</span></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><time date="2019-10-12">10/12/19</time>
<span class="location">Merrimack</span></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 class="to-num">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>

当然，我们可以使用简单的JavaScript:轻松地获得相同的结果

// caching all elements in the document that include the class-name
// of 'to-num':
const collection = document.querySelectorAll('.to-num'),
// defining a named function to handle the addition of
// relevant class-names; the first three arguments
// ('el', 'index', 'arr') are passed automatically from
// the use of NodeList.prototype.forEach(); here we also
// declare the argument 'gt' ('greater-than') with a
// default value of 3 (which can be overridden by the
// author/user):
isGreaterThan = (el, index, arr, gt = 3) => {
// here we use the same conditional operator as above to
// determine which of the two class-names to use:
let newClass = parseInt(el.textContent.trim(), 10) > gt ? 'negative' : 'positive';
// and here we use the Element.classList API to add that
// class-name to the current element-node of the NodeList
// over which we're iterating:
el.classList.add(newClass);
};
// using NodeList.prototype.forEach() to iterate over the
// NodeList we cached earlier, calling the isGreaterThan()
// function on all elements in the NodeList:
collection.forEach(isGreaterThan);


const collection = document.querySelectorAll('.to-num'),
isGreaterThan = (el, index, arr, gt = 3) => {
let newClass = parseInt(el.textContent.trim(), 10) > gt ? 'negative' : 'positive';
el.classList.add(newClass);
};
collection.forEach(isGreaterThan);
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
}
tbody tr:nth-child(odd) {
background-color: #dde;
}
th,
td {
background-color: transparent;
}
td.negative {
color: red;
}
td.positive {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h1>2019-20 Team Stats</h1>
</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><time date="2019-10-11">10/11/19</time>
<span class="location">Boston College</span></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><time date="2019-10-12">10/12/19</time>
<span class="location">Merrimack</span></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 class="to-num">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>

。。。作为后续问题，我是否需要为每个类别重复这一点？I.e"；用于"针对"；，等还是有更多的全球性选择？

OP对另一个答案的评论。

关于上面的注释，我只需添加一些自定义的data-*属性，在这种情况下，可能是data-boundary以及data-above和data-below，以确定如果单元格的值高于或低于该边界，则要应用的类名；例如：

// here we select all <th> elements with the 'data-boundary'
// attribute, and use the each() method to iterate over that
// collection:
$('th[data-boundary]').each(function(index, elem) {
// here we use a mostly native JavaScript approach for
// simplicity; the boundary we find by first using the
// Element.dataset API to retrieve the value of the
// data-boundary attribute, that is passed into the
// parseInt() function (along with the radix of 10, to
// ensure a base-10/decimal number); if parsing results
// in a false/falsey value we instead use 0 (zero is itself
// a falsey value, so this is a mild sanity-check for that
// result):
const boundary = parseInt(elem.dataset.boundary.trim(), 10) || 0,
// we use the Element.dataset API to retrieve the relevant
// class-names:
aboveClass = elem.dataset.above,
belowClass = elem.dataset.below,
// we retrieve the cellIndex of the current element
// (note that this can be problematic if the `colspan`
// attribute is used) from the HTMLTableHeaderCellElement
// (also available to HTMLTableCellElement nodes):
column = elem.cellIndex,
// here we use jQuery - although document.querySelectorAll
// could have been used just as easily - to retrieve all
// <td> elements that match the :nth-child() pseudo-class
// selector within <tr> elements and within the <tbody>
// element; we use 'column + 1' because JavaScript is
// zero-based whereas CSS is 1-based; note that we're also
// wrapping this CSS selector in a template-literal string
// in order to avoid string-concatenation with the
// variable, here we simply use the variable within the
// string inside of a '${ ...JavaScript here... }':
cells = $(`tbody tr td:nth-child(${ column + 1 })`);
// we iterate over the cells here as we did in our first
// example:
cells.addClass(function() {
return parseInt(this.textContent.trim(), 10) > boundary ? aboveClass : belowClass;
});
});


$('th[data-boundary]').each(function(index, elem) {
const boundary = parseInt(elem.dataset.boundary.trim(), 10) || 0,
aboveClass = elem.dataset.above,
belowClass = elem.dataset.below,
column = elem.cellIndex,
cells = $(`tbody tr td:nth-child(${ column + 1 })`);
cells.addClass(function() {
return parseInt(this.textContent.trim(), 10) > boundary ? aboveClass : belowClass;
});
});
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
}
tbody tr:nth-child(odd) {
background-color: #dde;
}
th,
td {
background-color: transparent;
}
td.negative {
color: red;
}
td.positive {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h1>2019-20 Team Stats</h1>
</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" data-boundary="30" data-above="positive" data-below="negative">Shots For</th>
<th id="shot-a" data-boundary="25" data-above="negative" data-below="positive">Shots Against</th>
<th>Shot %</th>
<th id="pen-t" data-boundary="3" data-above="negative" data-below="positive">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><time date="2019-10-11">10/11/19</time>
<span class="location">Boston College</span></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><time date="2019-10-12">10/12/19</time>
<span class="location">Merrimack</span></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 class="to-num">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>

参考文献：

  • HTML：
    • 自定义data-*属性
  • JavaScript：
    • 箭头函数
    • 条件(三元(运算符
    • document.querySelectorAll()
    • HTMLOrForeignElement.datasetAPI
    • HTMLTableCellElement
    • NodeList.prototype.forEach()
    • 模板文本字符串
    • CCD_ 10
  • jQuery：
    • addClass()
    • text()

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium