調用第二次主幹時丟失回調中的上下文

Question

以下代碼有效，但我認爲還有改進的空間。索引檢查在那裏，因爲在刪除第一個元素後，下一個元素看起來像索引爲-1，但實際上是之前刪除的元素。然後它再次迭代並找到單擊的元素並將其刪除。但由於第一次出現索引爲-1，所以錯誤的組被刪除。

如何讓殭屍元素更有效地迭代？這是在一個頁面確認的骨幹視圖。謝謝。

編輯：要添加HTML

集團部分總是不應該被刪除的默認組。

<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> 

removeGroup: function(evt) { 
    var deleteGroup = function() { 
    if ($(evt.currentTarget).closest('.tag').hasClass('is-active')){ 
     var clickedTag = $(evt.currentTarget).closest('.tag'); 
     var groupList = this.$el.find('.js-group-list'); 
     var groupTags = groupList.find('.tag'); 
     var index = groupTags.index(clickedTag); 
     var groupSections = $('.js-favorite-group'); 
     // add one to account for "All" section which is never removed 
     var groupToRemove = groupSections.eq(index + 1); 
     console.log(groupToRemove); 
     var removedGroupName = this.getGroupNameForSection(groupToRemove); 
     var allDoctors = groupSections.eq(0); 
     var allDoctorsContainer = allDoctors.find('.js-favorite-doctor-row-container'); 
     if (index > -1){ 
     groupToRemove.find('.js-favorite-doctor-row').appendTo(allDoctorsContainer); 
     clickedTag.remove(); 
     groupToRemove.remove(); 
     this.updateSectionDropdowns(); 
     this.ariaAlert('Group ' + removedGroupName + ' removed'); 
     this.hideConfirm(evt); 
     } 
    } 
    }; 

    this.showAlert(evt, deleteGroup); 

}, 

showAlert: function (evt, callback) { 
    that = this; 
    var clickedTag = ''; 
    clickedTag = $(evt.currentTarget).closest('.tag'); 
    clickedTag.addClass('is-active').attr('data-delete','true'); 
    $('.delete-acct-message').show().focus(); 

    $('.js-remove-yes').on('click', function(evt){ 
    evt.preventDefault(); 
    callback.apply(that); 
    }); 
    $('.js-remove-no').on('click', function(evt){ 
    evt.preventDefault(); 
    this.hideConfirm(evt); 
    }); 
}, 

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); 
     } 
    } 
    }); 
}