选中的 addClass 和 toggleClass 上的 jQuery 复选框适用于所有 DIV，而不仅仅是包含 DIV

Question

我有一些引导卡，每个卡里面都有一个复选框，当它们被选中时，我需要 2 个类来更改特定的卡 DIV ..

1. class="card border-secondary" --> class="card border-success"
2. class="card-header" --> class="card-header text-white bg-success"

为此，我在下面的 sn-p 中有以下 jQuery，但不幸的是它也适用于其他 DIV，并且边框类的切换以某种方式有效，但并非一直有效：

如何解决此问题，使其仅适用于复选框所在的一个 div，并让边框类的切换始终起作用？

$("input[type='checkbox']").change(function() {
  if ($(this).is(":checked")) {
    $("div.card-header").addClass("text-white bg-success");
    $("div.border-secondary").toggleClass("border-success");
  } else {
    $("div.card-header").removeClass("text-white bg-success");
    $("div.border-secondary").toggleClass("border-success");
  }
});

.checkbox .cr,
.radio .cr {
  position: relative;
  display: inline-block;
  border: 1px solid #a9a9a9;
  border-radius: .25em;
  width: 1.3em;
  height: 1.3em;
  float: left;
}

.radio .cr {
  border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
  position: absolute;
  font-size: 1.2em;
  line-height: 0;
  top: 50%;
  left: -5%;
  color: #5cb85c;
}

.radio .cr .cr-icon {
  margin-left: 0.04em;
}

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
  display: none;
}

.checkbox label input[type="checkbox"]+.cr>.cr-icon,
.radio label input[type="radio"]+.cr>.cr-icon {
  transform: scale(3) rotateZ(-20deg);
  opacity: 0;
  transition: all .3s ease-in;
}

.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon,
.radio label input[type="radio"]:checked+.cr>.cr-icon {
  transform: scale(1) rotateZ(0deg);
  opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled+.cr,
.radio label input[type="radio"]:disabled+.cr {
  opacity: .5;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<table cellpadding="6">
  <tr style="border-bottom: 0px solid #FFFFFF;">
    <td>
      <div class="card border-secondary" style="width: 130px;">
        <div class="card-header" align="center">Checbox 1</div>
        <div class="card-body" align="center">

          <div class="checkbox">
            <label style="font-size: 2.5em">
              <input type="checkbox" name="check1" id="check1" value="">
              <span class="cr"><i class="cr-icon fa fa-check"></i></span>
            </label>
          </div>

        </div>
      </div>
    </td>
    <td>
      <div class="card border-secondary" style="width: 130px;">
        <div class="card-header" align="center">Checbox 2</div>
        <div class="card-body" align="center">

          <div class="checkbox">
            <label style="font-size: 2.5em">
              <input type="checkbox" value=""  name="check2" id="check2">
              <span class="cr"><i class="cr-icon fa fa-check"></i></span>
             </label>
          </div>

        </div>
      </div>

    </td>
  </tr>
</table>

Answer 1

您需要更具体，例如'div.card-header' 将选择所有卡片标题（如您所知）。使用 'closest' 将向上遍历 DOM 树，而 'find' 将向下遍历，只选择正确的标题。

把js改成这样：

$("input[type='checkbox']").change(function() {
  if ($(this).is(":checked")) {
    $(this).closest(".card").find(".card-header").addClass("text-white bg-success");
    $(this).closest(".card").toggleClass("border-success");
  } else {
    $(this).closest(".card").find(".card-header").removeClass("text-white bg-success");
    $(this).closest(".card").toggleClass("border-success");
  }
});

工作示例：jsFiddle