Question

以下代码有效，但我认为还有改进的余地。索引检查是因为在删除第一个元素后，下一个元素看起来像索引为-1，但实际上是先前删除的元素。然后它再次迭代并找到被点击的元素并将其删除。但是，由于索引在第一次运行时为-1，因此错误的组被删除。

如何让zombie元素更有效地进行迭代？这是一个骨干视图，页面确认。谢谢。

编辑：添加HTML

组部分始终具有不应删除的默认组。

tsconfig.json

标记部分以删除组

<div class="section-border-top--grey js-favorite-group">
<h4 class="expandable__cta  cta--std-teal  js-expand-trigger"><a href="#"><span class="icon  icon-plus--teal  expandable__cta-icon"></span>All Doctors</a></h4>
<div class="expandable__content   js-favorite-doctor-row-container" aria-expanded="true">
  <div class="location-section dr-profile">
    <div class="section__content js-doctor-row">
      <div class="favorite-doctor-manage__row">
       DR info
      </div>
    </div><!--/section__content-->
  </div><!--/location-section-->
</div><!--/expandable__content-->

<div class="js-favorite-doctor-manage-add-remove">
<div class="grid-construct">
  <div class="expandable" data-controller="expandable">
    <ul class="tag-list js-group-list" tabindex="-1">
      <li class="tag  tag--teal" >
        Lauren's Doctors
        <ul class="tag-sub">
          <li><button class="tag-icon  tag-icon--close-white  js-group-remove">Remove group: Lauren's Doctors</button></li>
        </ul>
      </li>
      <li class="tag  tag--teal" >
        Timmy's Doctors
        <ul class="tag-sub">
          <li><button class="tag-icon  tag-icon--close-white  js-group-remove">Remove group: Timmy's Doctors</button></li>
        </ul>
      </li>
    </ul>
</div>

Answer 1

我建议你应该在你的html中使用自定义属性，这将简化你的javascript逻辑并使其更有效和高效。我修改了你的html和javascript以添加对自定义属性data-doc-group的支持。看看你的小组部分div

<div data-doc-group="lauren" class="section-border-top--grey js-favorite-group">
<h4 class="expandable__cta  cta--std-teal  js-expand-trigger"><a href="#"><span class="icon  icon-plus--teal  expandable__cta-icon"></span>Lauren's Doctors</a></h4>
<div class="expandable__content   js-favorite-doctor-row-container" aria-expanded="true">
  <div class="location-section dr-profile">
    <div class="section__content js-doctor-row">
      <div class="favorite-doctor-manage__row">
       DR info
      </div>
    </div><!--/section__content-->
  </div><!--/location-section-->
</div>

以下是包含自定义属性的标记

<li data-doc-group="lauren" class="tag  tag--teal">
  Lauren's Doctors
  <ul class="tag-sub">
    <li><button class="tag-icon  tag-icon--close-white  js-group-remove">Remove group: Lauren's Doctors</button></li>
  </ul>
</li>
<li data-doc-group="timmy" class="tag  tag--teal">
  Timmy's Doctors
  <ul class="tag-sub">
    <li><button class="tag-icon  tag-icon--close-white  js-group-remove">Remove group: Timmy's Doctors</button></li>
  </ul>
</li>

这是javascript来处理这个问题，（这可能有点儿麻烦，但会给你一个大概的想法）

removeGroup: function(evt) {
  this.showAlert(evt, function() {
    var $clickedTag = $(evt.currentTarget).closest('.tag'),
      dataGroupName,
      $groupToRemove,
      removedGroupName,
      $allDoctors = $('.js-favorite-group').eq(0),
      $allDoctorsContainer = $allDoctors.find('.js-favorite-doctor-row-container');

    if ($clickedTag.hasClass('is-active')){
      dataGroupName = $clickedTag.data('doc-group');
      $groupToRemove = $allDoctors.siblings('[data-doc-group="' + docGroupName + '"]');

      if ($groupToRemove.length > 0){
        $groupToRemove.find('.js-favorite-doctor-row').appendTo($allDoctorsContainer);
        $clickedTag.remove();
        $groupToRemove.remove();

        removedGroupName = this.getGroupNameForSection($groupToRemove);

        this.updateSectionDropdowns();
        this.ariaAlert('Group ' + removedGroupName + ' removed');
        this.hideConfirm(evt);
      }
    }  
  });
}

在调用第二次主干时，在回调中丢失上下文

1 个答案: