2023年2月27日 08:07:02go评论55阅读模式

英文:

Reverting the style of the class

问题

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

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

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

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

<!-- language: lang-js -->
function invertStyle() {
  if ($('.vermelho').hasClass('vermelho')) {
    $('.vermelho').removeClass('vermelho').addClass('azul');
  } else if ($('.azul').hasClass('azul')) {
    $('.azul').removeClass('azul').addClass('vermelho');
  }
}

<!-- language: lang-css -->
table {
  border-collapse: collapse;
  text-align: center;
  width: 100px;
}

.vermelho {
  background-color: red;
}

.azul {
  background-color: blue;
}

<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <table id="tabela">
    <tr>
      <th>Nome</th>
      <th>Idade</th>
    </tr>
    <tr class="azul">
      <td>João</td>
      <td>40</td>
    </tr>
    <tr class="vermelho">
      <td>Maria</td>
      <td>50</td>
    </tr>
    <tr class="azul">
      <td>Ana</td>
      <td>20</td>
    </tr>
    <tr class="vermelho">
      <td>Pedro</td>
      <td>10</td>
    </tr>
    <tr class="azul">
      <td>Lúcio</td>
      <td>25</td>
    </tr>
    <tr class="vermelho">
      <td>Júlia</td>
      <td>15</td>
    </tr>
  </table>
  <input type="button" value="Inverter estilo" onClick="invertStyle()" />
</body>

<!-- 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:

function invertStyle() {
  if ($(&#39;.vermelho&#39;).hasClass(&#39;vermelho&#39;)) {
    $(&#39;.vermelho&#39;).removeClass(&#39;vermelho&#39;).addClass(&#39;azul&#39;);
  } else if ($(&#39;.azul&#39;).hasClass(&#39;azul&#39;)) {
    $(&#39;.azul&#39;).removeClass(&#39;azul&#39;).addClass(&#39;vermelho&#39;);
  }
}

table {
  border-collapse: collapse;
  text-align: center;
  width: 100px;
}

.vermelho {
  background-color: red;
}

.azul {
  background-color: blue;

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;body&gt;
  &lt;table id=&quot;tabela&quot;&gt;
    &lt;tr&gt;
      &lt;th&gt;Nome&lt;/th&gt;
      &lt;th&gt;Idade&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr class=&quot;azul&quot;&gt;
      &lt;td&gt;Jo&#227;o&lt;/td&gt;
      &lt;td&gt;40&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class=&quot;vermelho&quot;&gt;
      &lt;td&gt;Maria&lt;/td&gt;
      &lt;td&gt;50&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class=&quot;azul&quot;&gt;
      &lt;td&gt;Ana&lt;/td&gt;
      &lt;td&gt;20&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class=&quot;vermelho&quot;&gt;
      &lt;td&gt;Pedro&lt;/td&gt;
      &lt;td&gt;10&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class=&quot;azul&quot;&gt;
      &lt;td&gt;L&#250;cio&lt;/td&gt;
      &lt;td&gt;25&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class=&quot;vermelho&quot;&gt;
      &lt;td&gt;J&#250;lia&lt;/td&gt;
      &lt;td&gt;15&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;input type=&quot;button&quot; value=&quot;Inverter estilo&quot; onClick=&quot;invertStyle()&quot; /&gt;

答案1

得分: 1

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

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

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

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

const button = document.querySelector('input[type="button"]');
const rows = document.querySelectorAll('tr:not(:first-child)');

button.addEventListener('click', function() {
  rows.forEach(row => {
    const currentClass = row.className;
    row.className = currentClass === 'azul' ? 'vermelho' : 'azul';
  });
});

table {
  border-collapse: collapse;
  text-align: center;
  width: 100px;
}

.vermelho {
  background-color: red;
}

.azul {
  background-color: blue;
}

<table id="tabela">
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr class="azul">
    <td>João</td>
    <td>40</td>
  </tr>
  <tr class="vermelho">
    <td>Maria</td>
    <td>50</td>
  </tr>
  <tr class="azul">
    <td>Ana</td>
    <td>20</td>
  </tr>
  <tr class="vermelho">
    <td>Pedro</td>
    <td>10</td>
  </tr>
  <tr class="azul">
    <td>Lúcio</td>
    <td>25</td>
  </tr>
  <tr class="vermelho">
    <td>Júlia</td>
    <td>15</td>
  </tr>
</table>
<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:

Store all tr rows in a variable rows
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.

const button = document.querySelector(&#39;input[type=&quot;button&quot;]&#39;);
const rows = document.querySelectorAll(&#39;tr:not(:first-child)&#39;);

button.addEventListener(&#39;click&#39;, function() {
  rows.forEach(row =&gt; {
    const currentClass = row.className;
    row.className = currentClass === &#39;azul&#39; ? &#39;vermelho&#39; : &#39;azul&#39;;
  });
});

table {
  border-collapse: collapse;
  text-align: center;
  width: 100px;
}

.vermelho {
  background-color: red;
}

.azul {
  background-color: blue;
}

&lt;table id=&quot;tabela&quot;&gt;
  &lt;tr&gt;
    &lt;th&gt;Nome&lt;/th&gt;
    &lt;th&gt;Idade&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr class=&quot;azul&quot;&gt;
    &lt;td&gt;Jo&#227;o&lt;/td&gt;
    &lt;td&gt;40&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class=&quot;vermelho&quot;&gt;
    &lt;td&gt;Maria&lt;/td&gt;
    &lt;td&gt;50&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class=&quot;azul&quot;&gt;
    &lt;td&gt;Ana&lt;/td&gt;
    &lt;td&gt;20&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class=&quot;vermelho&quot;&gt;
    &lt;td&gt;Pedro&lt;/td&gt;
    &lt;td&gt;10&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class=&quot;azul&quot;&gt;
    &lt;td&gt;L&#250;cio&lt;/td&gt;
    &lt;td&gt;25&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class=&quot;vermelho&quot;&gt;
    &lt;td&gt;J&#250;lia&lt;/td&gt;
    &lt;td&gt;15&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;input type=&quot;button&quot; value=&quot;Inverter estilo&quot; /&gt;

答案2

得分: 0

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

function invertStyle() {
  $('.vermelho, .azul').each(function() {
    if ($(this).hasClass('vermelho')) {
      $(this).removeClass('vermelho').addClass('azul');
    } else if ($(this).hasClass('azul')) {
      $(this).removeClass('azul').addClass('vermelho');
    }
  });
}

html, body {
  height: 100%;
  width: 100%;
}

table{
  border-collapse: collapse;
  text-align: center;
  width: 100px;
}

.vermelho{
  background-color: #f96c6c;
}

.azul{
  background-color: #5757ff;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Exercise</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <table id="tabela">
    <tr>
      <th>Nome</th>
      <th>Idade</th>
    </tr>
    <tr class="azul">
      <td>João</td>
      <td>40</td>
    </tr>
    <tr class="vermelho">
      <td>Maria</td>
      <td>50</td>
    </tr>
    <tr class="azul">
      <td>Ana</td>
      <td>20</td>
    </tr>
    <tr class="vermelho">
      <td>Pedro</td>
      <td>10</td>
    </tr>
    <tr class="azul">
      <td>Lúcio</td>
      <td>25</td>
    </tr>
    <tr class="vermelho">
      <td>Júlia</td>
      <td>15</td>
    </tr>
  </table>
  <hr>
  <input type="button" value="Inverter estilo" onClick="invertStyle()" />
</body>

</html>

英文:

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

function invertStyle() {
  $(&#39;.vermelho, .azul&#39;).each(function() {
    if ($(this).hasClass(&#39;vermelho&#39;)) {
      $(this).removeClass(&#39;vermelho&#39;).addClass(&#39;azul&#39;);
    } else if ($(this).hasClass(&#39;azul&#39;)) {
      $(this).removeClass(&#39;azul&#39;).addClass(&#39;vermelho&#39;);
    }
  });
}

html, body {
  height: 100%;
  width: 100%;
}

table{
  border-collapse: collapse;
  text-align: center;
  width: 100px;
}

.vermelho{
  background-color: #f96c6c;
}

.azul{
  background-color: #5757ff;
}

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
  &lt;title&gt;Exercise&lt;/title&gt;
  &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;table id=&quot;tabela&quot;&gt;
    &lt;tr&gt;
      &lt;th&gt;Nome&lt;/th&gt;
      &lt;th&gt;Idade&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr class=&quot;azul&quot;&gt;
      &lt;td&gt;Jo&#227;o&lt;/td&gt;
      &lt;td&gt;40&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class=&quot;vermelho&quot;&gt;
      &lt;td&gt;Maria&lt;/td&gt;
      &lt;td&gt;50&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class=&quot;azul&quot;&gt;
      &lt;td&gt;Ana&lt;/td&gt;
      &lt;td&gt;20&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class=&quot;vermelho&quot;&gt;
      &lt;td&gt;Pedro&lt;/td&gt;
      &lt;td&gt;10&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class=&quot;azul&quot;&gt;
      &lt;td&gt;L&#250;cio&lt;/td&gt;
      &lt;td&gt;25&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class=&quot;vermelho&quot;&gt;
      &lt;td&gt;J&#250;lia&lt;/td&gt;
      &lt;td&gt;15&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;hr&gt;
  &lt;input type=&quot;button&quot; value=&quot;Inverter estilo&quot; onClick=&quot;invertStyle()&quot; /&gt;


&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

还原类的样式

问题

答案1

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

答案2

在两个JavaScript数组之间查找

如何在单页提交表单时保存发票标题和发票行项目，使用.NET Core Razor Pages？

无法从JavaScript的Fetch函数中在HTML标签中返回字符串。

如何在JavaScript中解决轴对齐的矩形与矩形边界框的碰撞？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论

问题

答案1

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

答案2

发表评论

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