清空并附加到最​​近的 DIV

Question

我在这里整理了一个 JSFiddle：

https://jsfiddle.net/Rockhopper92/zrq5L2dj/

我的问题是试图找到最近的 div 并清空然后追加到它。我的理解是最接近的只能找到父元素，但我不确定为什么找不到它。

我尝试过移动元素，但这显然会破坏切换的工作。

我的 jQuery 看起来像这样：

$(".subscribedTo").on("click", function() {
  if ($(this).is(":checked")) {
    var labelText = "Subscribed";
  } else {
    var labelText = "Unsubscribed";
  }
  $(this).closest(".labelText").empty();
});

而受影响的 HTML 是这样的：

<div class="block">
  <label class="label">
  <div class="toggle">
    <input class="subscribedTo" type="checkbox" name="check" value="check" checked>
    <div class="toggle-inner">
       <div class="indicator"></div>
    </div>
  </div>
    <div class="labelText">Subscribed</div>
</label>
</div>

我不确定如何使用该 jQuery 识别 labelText div 并将其附加到它，因为页面上会有多个具有相同类值的 div。

Answer 1

您遇到的问题是 closest() 查找父元素，而您所针对的 .labelText 元素是复选框的同级元素。因此，您可以使用siblings() 或closest().find()，我个人更喜欢后者，因为它更强大。

还请注意，您可以向text() 提供一个函数，以根据复选框的checked 属性的状态设置新值。您无需执行 empty() 并将其附加为单独的调用。试试这个：

$(".subscribedTo").on("click", function() {
  var checkbox = this;
  $(this).closest('.block').find(".labelText").text(function() {
    return checkbox.checked ? 'Subscribed' : 'Unsubscribed';
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  <label class="label">
    <div class="toggle">
      <input class="subscribedTo" type="checkbox" name="check" value="check" checked>
      <div class="toggle-inner">
         <div class="indicator"></div>
      </div>
    </div>
    <div class="labelText">Subscribed</div>
  </label>
</div>