时间戳

首页 > 解决方案 > 在纯 JS 中单击时添加/删除类

javascript - 在纯 JS 中单击时添加/删除类

问题描述

我一直用jQuery，那里很容易，但我决定切换到纯JS，遇到了困难。当我单击按钮时，我希望将crossOut类添加到类的 3 个元素中appOrd，并且按钮本身变为非活动状态（引导类 - disabled）。而第二个按钮 ，Resume则相反。但是没有任何效果，请告诉我是什么问题？

PSI 假设 中存在错误const，也许不能这样使用？

UPD-1。Barmar 提出了一个错字，并更正了它。

UPD-2。必须只将类添加到表的当前行。

const hasClass = document.querySelector('.appOrd').classList.contains('crossOut');

document.querySelector('.completeBtn').onclick=function(e) {
    e.preventDefault();

    if( !hasClass) {
        document.querySelector('.appOrd').classList.add('crossOut');
        document.querySelector('.resumeBtn').classList.remove('disabled');
        this.classList.add('disabled');
    }
}

document.querySelector('.resumeBtn').onclick=function(e) {
    e.preventDefault();

    if(hasClass) {
        document.querySelector('.appOrd').classList.remove('crossOut');
        document.querySelector('.completeBtn').classList.remove('disabled');
        this.classList.add('disabled');
    }
}
.crossOut{
  text-decoration: line-through;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
      <thead>
        <tr class="text-center">
          <th scope="col">Name</th>
          <th scope="col">Phone number</th>
          <th scope="col">Application time</th>
          <th scope="col">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr class="text-center">
          <td scope="row" class="appOrd">Name</td>
          <td class="appOrd">Phone number</td>
          <td class="appOrd">2021-02-07 08:40:48</td>
          <td>
            <a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
            <a class="btn btn-danger completeBtn" href="#">Complete</a>
          </td>
        </tr>
      </tbody>
    </table>

标签： javascript

解决方案

您需要使用querySelectorAll()来选择多个元素，然后在所有元素上更新类。这可以通过.forEach()遍历它们来完成。

同样，用于querySelectorAll()将onclick处理程序添加到每个按钮。

document.querySelectorAll('.completeBtn').forEach(el => el.onclick = function(e) {
  e.preventDefault();
  let row = this.closest("tr");
  row.querySelectorAll('.appOrd').forEach(el => el.classList.add('crossOut'));
  row.querySelector('.resumeBtn').classList.remove('disabled');
  this.classList.add('disabled');
});

document.querySelectorAll('.resumeBtn').forEach(el => el.onclick = function(e) {
  e.preventDefault();
  let row = this.closest("tr");
  row.querySelectorAll('.appOrd').forEach(el => el.classList.remove('crossOut'));
  row.querySelector('.completeBtn').classList.remove('disabled');
  this.classList.add('disabled');
});
.crossOut {
  text-decoration: line-through;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
  <thead>
    <tr class="text-center">
      <th scope="col">Name</th>
      <th scope="col">Phone number</th>
      <th scope="col">Application time</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-center">
      <td scope="row" class="appOrd">Name</td>
      <td class="appOrd">Phone number</td>
      <td class="appOrd">2021-02-07 08:40:48</td>
      <td>
        <a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
        <a class="btn btn-danger completeBtn" href="#">Complete</a>
      </td>
    </tr>
    <tr class="text-center">
      <td scope="row" class="appOrd">Name 2</td>
      <td class="appOrd">Phone number 2</td>
      <td class="appOrd">2021-02-06 09:00:50</td>
      <td>
        <a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
        <a class="btn btn-danger completeBtn" href="#">Complete</a>
      </td>
    </tr>
  </tbody>
</table>

推荐阅读