时间戳

首页 > 解决方案 > 清空并附加到最​​近的 DIV

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

问题描述

我在这里整理了一个 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。

标签： jquery

解决方案

您遇到的问题是closest()寻找父元素，但.labelText您要寻找的元素是复选框的兄弟。因此，您可以使用siblings()或closest().find()，我个人更喜欢后者，因为它更强大。

另请注意，您可以提供一个函数来根据复选框属性的text()状态设置新值。checked您不需要将empty()and append 作为单独的调用。尝试这个：

$(".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>

推荐阅读