清空并附加到最​​近的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>