还原类的样式

huangapple
go评论102阅读模式
英文:

Reverting the style of the class

问题

我正在学习如何编写代码，不幸的是，我在一个练习中遇到了困难。

我有一个包含两行不同颜色的table，我想要反转颜色 - tr 类.vermelho需要变成.azul，.azul变成.vermelho。

我尝试了以下JS代码，但它将整个table都设置为单一颜色。你能否帮助我找出JS代码中的错误？对于任何英语拼写错误，我不是母语，深感抱歉：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. function invertStyle() {
  5.   if ($('.vermelho').hasClass('vermelho')) {
  6.     $('.vermelho').removeClass('vermelho').addClass('azul');
  7.   } else if ($('.azul').hasClass('azul')) {
  8.     $('.azul').removeClass('azul').addClass('vermelho');
  9.   }
  10. }
  12. <!-- language: lang-css -->
  13. table {
  14.   border-collapse: collapse;
  15.   text-align: center;
  16.   width: 100px;
  17. }
  19. .vermelho {
  20.   background-color: red;
  21. }
  23. .azul {
  24.   background-color: blue;
  25. }
  27. <!-- language: lang-html -->
  28. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  30. <body>
  31.   <table id="tabela">
  32.     <tr>
  33.       <th>Nome</th>
  34.       <th>Idade</th>
  35.     </tr>
  36.     <tr class="azul">
  37.       <td>João</td>
  38.       <td>40</td>
  39.     </tr>
  40.     <tr class="vermelho">
  41.       <td>Maria</td>
  42.       <td>50</td>
  43.     </tr>
  44.     <tr class="azul">
  45.       <td>Ana</td>
  46.       <td>20</td>
  47.     </tr>
  48.     <tr class="vermelho">
  49.       <td>Pedro</td>
  50.       <td>10</td>
  51.     </tr>
  52.     <tr class="azul">
  53.       <td>Lúcio</td>
  54.       <td>25</td>
  55.     </tr>
  56.     <tr class="vermelho">
  57.       <td>Júlia</td>
  58.       <td>15</td>
  59.     </tr>
  60.   </table>
  61.   <input type="button" value="Inverter estilo" onClick="invertStyle()" />
  62. </body>
  64. <!-- end snippet -->

以上是您提供的代码部分的翻译。

英文:

I am learning how to code and unfortunately, I am stuck on one exercise.

I have a table containing 2 different rows of colors, and I want to invert the colors — the tr class .vermelho needs to be .azul, and .azul to be .vermelho.

I tried the following JS code, but it's setting the whole table with a single color. Would you please be so kind to help me identify the error on the JS code? Sorry for any English typo I am not native:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function invertStyle() {
  2.   if ($(&#39;.vermelho&#39;).hasClass(&#39;vermelho&#39;)) {
  3.     $(&#39;.vermelho&#39;).removeClass(&#39;vermelho&#39;).addClass(&#39;azul&#39;);
  4.   } else if ($(&#39;.azul&#39;).hasClass(&#39;azul&#39;)) {
  5.     $(&#39;.azul&#39;).removeClass(&#39;azul&#39;).addClass(&#39;vermelho&#39;);
  6.   }
  7. }

<!-- language: lang-css -->

  1. table {
  2.   border-collapse: collapse;
  3.   text-align: center;
  4.   width: 100px;
  5. }
  7. .vermelho {
  8.   background-color: red;
  9. }
  11. .azul {
  12.   background-color: blue;

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;body&gt;
  4.   &lt;table id=&quot;tabela&quot;&gt;
  5.     &lt;tr&gt;
  6.       &lt;th&gt;Nome&lt;/th&gt;
  7.       &lt;th&gt;Idade&lt;/th&gt;
  8.     &lt;/tr&gt;
  9.     &lt;tr class=&quot;azul&quot;&gt;
  10.       &lt;td&gt;Jo&#227;o&lt;/td&gt;
  11.       &lt;td&gt;40&lt;/td&gt;
  12.     &lt;/tr&gt;
  13.     &lt;tr class=&quot;vermelho&quot;&gt;
  14.       &lt;td&gt;Maria&lt;/td&gt;
  15.       &lt;td&gt;50&lt;/td&gt;
  16.     &lt;/tr&gt;
  17.     &lt;tr class=&quot;azul&quot;&gt;
  18.       &lt;td&gt;Ana&lt;/td&gt;
  19.       &lt;td&gt;20&lt;/td&gt;
  20.     &lt;/tr&gt;
  21.     &lt;tr class=&quot;vermelho&quot;&gt;
  22.       &lt;td&gt;Pedro&lt;/td&gt;
  23.       &lt;td&gt;10&lt;/td&gt;
  24.     &lt;/tr&gt;
  25.     &lt;tr class=&quot;azul&quot;&gt;
  26.       &lt;td&gt;L&#250;cio&lt;/td&gt;
  27.       &lt;td&gt;25&lt;/td&gt;
  28.     &lt;/tr&gt;
  29.     &lt;tr class=&quot;vermelho&quot;&gt;
  30.       &lt;td&gt;J&#250;lia&lt;/td&gt;
  31.       &lt;td&gt;15&lt;/td&gt;
  32.     &lt;/tr&gt;
  33.   &lt;/table&gt;
  34.   &lt;input type=&quot;button&quot; value=&quot;Inverter estilo&quot; onClick=&quot;invertStyle()&quot; /&gt;

<!-- end snippet -->

答案1

得分: 1

选择所有tr，除了第一行，然后在每次点击时切换它们的类。

请参考下面的代码片段。简而言之，我已经像下面这样解决了问题：

  1. 将所有tr行存储在变量rows中。
  2. 每次按钮被点击时，迭代tr列表以检查它们当前的类名。
    • 如果当前是azul，则将其更改为vermelho。
    • 如果当前不是azul（即为vermelho），则将其更改为azul。

我尽量使一切都清晰易懂，唯一可能让人困惑的是三元运算符。请参阅Ternary Conditional的MDN文档。

  1. const button = document.querySelector('input[type="button"]');
  2. const rows = document.querySelectorAll('tr:not(:first-child)');
  4. button.addEventListener('click', function() {
  5.   rows.forEach(row => {
  6.     const currentClass = row.className;
  7.     row.className = currentClass === 'azul' ? 'vermelho' : 'azul';
  8.   });
  9. });
  1. table {
  2.   border-collapse: collapse;
  3.   text-align: center;
  4.   width: 100px;
  5. }
  7. .vermelho {
  8.   background-color: red;
  9. }
  11. .azul {
  12.   background-color: blue;
  13. }
  1. <table id="tabela">
  2.   <tr>
  3.     <th>Nome</th>
  4.     <th>Idade</th>
  5.   </tr>
  6.   <tr class="azul">
  7.     <td>João</td>
  8.     <td>40</td>
  9.   </tr>
  10.   <tr class="vermelho">
  11.     <td>Maria</td>
  12.     <td>50</td>
  13.   </tr>
  14.   <tr class="azul">
  15.     <td>Ana</td>
  16.     <td>20</td>
  17.   </tr>
  18.   <tr class="vermelho">
  19.     <td>Pedro</td>
  20.     <td>10</td>
  21.   </tr>
  22.   <tr class="azul">
  23.     <td>Lúcio</td>
  24.     <td>25</td>
  25.   </tr>
  26.   <tr class="vermelho">
  27.     <td>Júlia</td>
  28.     <td>15</td>
  29.   </tr>
  30. </table>
  31. <input type="button" value="Inverter estilo" />

希望这有助于你理解代码。

英文:

Select all tr except the first row, and toggle the class on each click.

Please see the code snippet below. In short, I've solved like the following:

  1. Store all tr rows in a variable rows
  2. Each time the button is clicked, iterate the tr list to check their current class name.
    • If currently azul, make it vermelho.
    • If currently not azul (i.e. it's vermelho), make it azul.

I tried to make everything self-explanatory, and the only potentially confusing thing might be the ternary operator. See MDN Docs for Ternary Conditional.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const button = document.querySelector(&#39;input[type=&quot;button&quot;]&#39;);
  2. const rows = document.querySelectorAll(&#39;tr:not(:first-child)&#39;);
  4. button.addEventListener(&#39;click&#39;, function() {
  5.   rows.forEach(row =&gt; {
  6.     const currentClass = row.className;
  7.     row.className = currentClass === &#39;azul&#39; ? &#39;vermelho&#39; : &#39;azul&#39;;
  8.   });
  9. });

<!-- language: lang-css -->

  1. table {
  2.   border-collapse: collapse;
  3.   text-align: center;
  4.   width: 100px;
  5. }
  7. .vermelho {
  8.   background-color: red;
  9. }
  11. .azul {
  12.   background-color: blue;
  13. }

<!-- language: lang-html -->

  1. &lt;table id=&quot;tabela&quot;&gt;
  2.   &lt;tr&gt;
  3.     &lt;th&gt;Nome&lt;/th&gt;
  4.     &lt;th&gt;Idade&lt;/th&gt;
  5.   &lt;/tr&gt;
  6.   &lt;tr class=&quot;azul&quot;&gt;
  7.     &lt;td&gt;Jo&#227;o&lt;/td&gt;
  8.     &lt;td&gt;40&lt;/td&gt;
  9.   &lt;/tr&gt;
  10.   &lt;tr class=&quot;vermelho&quot;&gt;
  11.     &lt;td&gt;Maria&lt;/td&gt;
  12.     &lt;td&gt;50&lt;/td&gt;
  13.   &lt;/tr&gt;
  14.   &lt;tr class=&quot;azul&quot;&gt;
  15.     &lt;td&gt;Ana&lt;/td&gt;
  16.     &lt;td&gt;20&lt;/td&gt;
  17.   &lt;/tr&gt;
  18.   &lt;tr class=&quot;vermelho&quot;&gt;
  19.     &lt;td&gt;Pedro&lt;/td&gt;
  20.     &lt;td&gt;10&lt;/td&gt;
  21.   &lt;/tr&gt;
  22.   &lt;tr class=&quot;azul&quot;&gt;
  23.     &lt;td&gt;L&#250;cio&lt;/td&gt;
  24.     &lt;td&gt;25&lt;/td&gt;
  25.   &lt;/tr&gt;
  26.   &lt;tr class=&quot;vermelho&quot;&gt;
  27.     &lt;td&gt;J&#250;lia&lt;/td&gt;
  28.     &lt;td&gt;15&lt;/td&gt;
  29.   &lt;/tr&gt;
  30. &lt;/table&gt;
  31. &lt;input type=&quot;button&quot; value=&quot;Inverter estilo&quot; /&gt;

<!-- end snippet -->

答案2

得分: 0

我使用了以下的JS代码，并且它有效：

  1. function invertStyle() {
  2.   $('.vermelho, .azul').each(function() {
  3.     if ($(this).hasClass('vermelho')) {
  4.       $(this).removeClass('vermelho').addClass('azul');
  5.     } else if ($(this).hasClass('azul')) {
  6.       $(this).removeClass('azul').addClass('vermelho');
  7.     }
  8.   });
  9. }
  1. html, body {
  2.   height: 100%;
  3.   width: 100%;
  4. }
  6. table{
  7.   border-collapse: collapse;
  8.   text-align: center;
  9.   width: 100px;
  10. }
  12. .vermelho{
  13.   background-color: #f96c6c;
  14. }
  16. .azul{
  17.   background-color: #5757ff;
  18. }
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width">
  7.   <title>Exercise</title>
  8.   <link href="style.css" rel="stylesheet" type="text/css" />
  9.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  10.   <script src="script.js"></script>
  11. </head>
  13. <body>
  14.   <table id="tabela">
  15.     <tr>
  16.       <th>Nome</th>
  17.       <th>Idade</th>
  18.     </tr>
  19.     <tr class="azul">
  20.       <td>João</td>
  21.       <td>40</td>
  22.     </tr>
  23.     <tr class="vermelho">
  24.       <td>Maria</td>
  25.       <td>50</td>
  26.     </tr>
  27.     <tr class="azul">
  28.       <td>Ana</td>
  29.       <td>20</td>
  30.     </tr>
  31.     <tr class="vermelho">
  32.       <td>Pedro</td>
  33.       <td>10</td>
  34.     </tr>
  35.     <tr class="azul">
  36.       <td>Lúcio</td>
  37.       <td>25</td>
  38.     </tr>
  39.     <tr class="vermelho">
  40.       <td>Júlia</td>
  41.       <td>15</td>
  42.     </tr>
  43.   </table>
  44.   <hr>
  45.   <input type="button" value="Inverter estilo" onClick="invertStyle()" />
  46. </body>
  48. </html>
英文:

I ended up using the following JS code, and it worked:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function invertStyle() {
  2.   $(&#39;.vermelho, .azul&#39;).each(function() {
  3.     if ($(this).hasClass(&#39;vermelho&#39;)) {
  4.       $(this).removeClass(&#39;vermelho&#39;).addClass(&#39;azul&#39;);
  5.     } else if ($(this).hasClass(&#39;azul&#39;)) {
  6.       $(this).removeClass(&#39;azul&#39;).addClass(&#39;vermelho&#39;);
  7.     }
  8.   });
  9. }

<!-- language: lang-css -->

  1. html, body {
  2.   height: 100%;
  3.   width: 100%;
  4. }
  6. table{
  7.   border-collapse: collapse;
  8.   text-align: center;
  9.   width: 100px;
  10. }
  12. .vermelho{
  13.   background-color: #f96c6c;
  14. }
  16. .azul{
  17.   background-color: #5757ff;
  18. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  4. &lt;head&gt;
  5.   &lt;meta charset=&quot;utf-8&quot;&gt;
  6.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
  7.   &lt;title&gt;Exercise&lt;/title&gt;
  8.   &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
  9.   &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js&quot;&gt;&lt;/script&gt;
  10.   &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  11. &lt;/head&gt;
  13. &lt;body&gt;
  14.   &lt;table id=&quot;tabela&quot;&gt;
  15.     &lt;tr&gt;
  16.       &lt;th&gt;Nome&lt;/th&gt;
  17.       &lt;th&gt;Idade&lt;/th&gt;
  18.     &lt;/tr&gt;
  19.     &lt;tr class=&quot;azul&quot;&gt;
  20.       &lt;td&gt;Jo&#227;o&lt;/td&gt;
  21.       &lt;td&gt;40&lt;/td&gt;
  22.     &lt;/tr&gt;
  23.     &lt;tr class=&quot;vermelho&quot;&gt;
  24.       &lt;td&gt;Maria&lt;/td&gt;
  25.       &lt;td&gt;50&lt;/td&gt;
  26.     &lt;/tr&gt;
  27.     &lt;tr class=&quot;azul&quot;&gt;
  28.       &lt;td&gt;Ana&lt;/td&gt;
  29.       &lt;td&gt;20&lt;/td&gt;
  30.     &lt;/tr&gt;
  31.     &lt;tr class=&quot;vermelho&quot;&gt;
  32.       &lt;td&gt;Pedro&lt;/td&gt;
  33.       &lt;td&gt;10&lt;/td&gt;
  34.     &lt;/tr&gt;
  35.     &lt;tr class=&quot;azul&quot;&gt;
  36.       &lt;td&gt;L&#250;cio&lt;/td&gt;
  37.       &lt;td&gt;25&lt;/td&gt;
  38.     &lt;/tr&gt;
  39.     &lt;tr class=&quot;vermelho&quot;&gt;
  40.       &lt;td&gt;J&#250;lia&lt;/td&gt;
  41.       &lt;td&gt;15&lt;/td&gt;
  42.     &lt;/tr&gt;
  43.   &lt;/table&gt;
  44.   &lt;hr&gt;
  45.   &lt;input type=&quot;button&quot; value=&quot;Inverter estilo&quot; onClick=&quot;invertStyle()&quot; /&gt;
  48. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月27日 08:07:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/75575790.html
  • css
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定