将活动类添加到复选框的匹配标签

Question

我正在尝试将活动类添加到父项ul之外的复选框输入的匹配标签上。

我设置了一些标签，这些标签起着for=""值与复选框ID匹配的按钮的作用，因此当单击它们时，他们会检查匹配的输入，这很好，但是我会想要做的就是编写一个脚本，该脚本可以在选中复选框或具有活动类的情况下，在.labelBtns部分的匹配标签中添加活动类。

到目前为止，我已经编写了一些jQuery，控制台在复选框中记录id，在匹配标签中记录for，但我一直在努力将逻辑连接在一起以实现所需的功能，因此任何帮助都会很棒。

$('.m-label-inline').filter('.selected').each(function(i) {
  var idValue = $(this).find('input').attr('id');
  console.log(idValue);
  $('.sizeLabel').each(function() {
    var idValue2 = $(this).attr('for');
    console.log(idValue2);
  });
});

html {
  box-sizing: border-box;
  font-size: 62.5%;
  -webkit-overflow-scrolling: touch;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  margin: 0 auto;
  max-width: 50rem;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.m-refinement {
  display: flex;
  flex-wrap: wrap;
}

.m-label-inline {
  background: #f8f8f8;
  border: 0.1rem solid #ddd;
  flex-basis: calc(50% - 1rem);
  margin-right: 2rem;
  margin-top: 2rem;
  max-width: calc(50% - 1rem);
  padding: 1rem;
}

.m-label-inline:nth-child(even) {
  margin-right: 0;
}

.labelBtns {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -12em;
  margin-left: -2rem;
  margin-top: 2rem;
}

.sizeLabel {
  color: #111;
  cursor: pointer;
  flex-basis: 50%;
  max-width: 50%;
  padding-bottom: 2rem;
  padding-left: 2rem;
  user-select: none;
}

.labelText {
  background: white;
  border: 0.2rem solid #222;
  color: #111;
  display: inline-block;
  padding: 1rem 0.6rem;
  text-align: center;
  width: 100%;
}

.selected {
  background: tomato !important;
}

.selectedLabel .labelText {
  background: tomato;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="m-refinement">
  <li class="selected swatch-xs m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="XS" name="XS" data-name="size" checked="checked" data-value="XS" title="Refine by Size: XS">
    <label for="XS">XS</label>
  </li>
  <li class=" swatch-s} m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="S" name="S" data-value="S" title="Currently Refined by Size: S">
    <label for="S">S</label>
  </li>
  <li class="swatch-m} m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="M" name="M" data-value="M" title="Currently Refined by Size: M">
    <label for="M">M</label>
  </li>
  <li class="swatch-l} m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="L" name="L" data-value="L" title="Currently Refined by Size: L">
    <label for="L">L</label>
  </li>
  <li class="swatch-xl m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="XL" name="XL" data-name="size" data-value="XL" title="Refine by Size: XL">
    <label for="XL">XL</label>
  </li>
  <li class="swatch-2xl m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="2XL" name="2XL" data-name="size" data-value="2XL" title="Refine by Size: 2XL">
    <label for="2XL">2XL</label>
  </li>
</ul>
<section class="labelBtns">
  <label class="sizeLabel" for="XS">
    <span class="labelText">Size: XS</span>
  </label>
  <label class="sizeLabel" for="S">
    <span class="labelText">Size: S</span>
  </label>
  <label class="sizeLabel" for="M">
    <span class="labelText">Size: M</span>
  </label>
  <label class="sizeLabel" for="L">
    <span class="labelText">Size: L</span>
  </label>
  <label class="sizeLabel" for="XL">
    <span class="labelText">Size: XL</span>
  </label>
  <label class="sizeLabel" for="2XL">
    <span class="labelText ">Size: 2XL</span>
  </label>
</section>

Answer 1

要实现此目的，您只需要钩住复选框的change事件，然后根据是否选中该复选框，就可以在closest() li上设置类。您还可以使用复选框的id通过其label属性来找到相关的for：

尝试一下：

$(':checkbox').on('change', function() {
  $(this).closest('li').add('label[for="' + this.id + '"] span').toggleClass('selected', this.checked);
}).trigger('change');

请注意，trigger('change')使逻辑在页面加载时运行以自动分配类，而无需手动将其放入HTML。

$(':checkbox').on('change', function() {
  $(this).closest('li').add('label[for="' + this.id + '"] span').toggleClass('selected', this.checked);
}).trigger('change');

html {
  box-sizing: border-box;
  font-size: 62.5%;
  -webkit-overflow-scrolling: touch;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  margin: 0 auto;
  max-width: 50rem;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.m-refinement {
  display: flex;
  flex-wrap: wrap;
}

.m-label-inline {
  background: #f8f8f8;
  border: 0.1rem solid #ddd;
  flex-basis: calc(50% - 1rem);
  margin-right: 2rem;
  margin-top: 2rem;
  max-width: calc(50% - 1rem);
  padding: 1rem;
}

.m-label-inline:nth-child(even) {
  margin-right: 0;
}

.labelBtns {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -12em;
  margin-left: -2rem;
  margin-top: 2rem;
}

.sizeLabel {
  color: #111;
  cursor: pointer;
  flex-basis: 50%;
  max-width: 50%;
  padding-bottom: 2rem;
  padding-left: 2rem;
  user-select: none;
}

.labelText {
  background: white;
  border: 0.2rem solid #222;
  color: #111;
  display: inline-block;
  padding: 1rem 0.6rem;
  text-align: center;
  width: 100%;
}

.selected {
  background: tomato !important;
}

.selectedLabel .labelText {
  background: tomato;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="m-refinement">
  <li class="swatch-xs m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="XS" name="XS" data-name="size" checked="checked" data-value="XS">
    <label for="XS">XS</label>
  </li>
  <li class=" swatch-s} m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="S" name="S" data-value="S">
    <label for="S">S</label>
  </li>
  <li class="swatch-m} m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="M" name="M" data-value="M">
    <label for="M">M</label>
  </li>
</ul>
<section class="labelBtns">
  <label class="sizeLabel" for="XS">
    <span class="labelText">Size: XS</span>
  </label>
  <label class="sizeLabel" for="S">
    <span class="labelText">Size: S</span>
  </label>
  <label class="sizeLabel" for="M">
    <span class="labelText">Size: M</span>
  </label>
</section>