javascript 恢复类的样式

e37o9pze 于 2023-02-28 发布在 Java

关注(0)|答案(1)|浏览(119)

我正在学习如何编码，不幸的是，我被一个练习卡住了。
我有一个table，它包含两行不同的颜色，我想反转颜色-tr类.vermelho需要是.azul，.azul需要是.vermelho。
我试了下面的JS代码，但是它把整个table设置成了一个单一的颜色。你能帮我找出JS代码中的错误吗？抱歉，我不是英语母语：

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

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

.vermelho {
  background-color: red;
}

.azul {
  background-color: blue;

<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()" />

JavaScript

来源：https://stackoverflow.com/questions/75575790/reverting-the-style-of-the-class

1条答案

按热度按时间

06odsfpq1#

选择除第一行之外的所有`tr`，并在每次单击时切换类。

请看下面的代码片段。简而言之，我已经解决了如下：
1.将所有tr行存储在变量rows中

每次单击该按钮时，迭代tr列表以检查其当前类名。
如果当前为azul，请将其设置为vermelho。
如果当前 * 不是 * azul（即它是vermelho），则将其设置为azul。

我试着让一切都一目了然，唯一可能令人困惑的事情可能是三元运算符。

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" />

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 恢复类的样式

1条答案

选择除第一行之外的所有`tr`，并在每次单击时切换类。

相关问题

热门标签

最新问答

javascript 恢复类的样式

1条答案

选择除第一行之外的所有tr，并在每次单击时切换类。

相关问题

热门标签

最新问答

选择除第一行之外的所有`tr`，并在每次单击时切换类。