針對子菜單的jQuery Match Class和ID

Question

對於最近的Wordpress項目，我創建了一個包含類別的固定子菜單。現在，客戶希望該類別在向下滾動頁面列表帖子摘錄時突出顯示。每篇文章僅限於一個類別。我將類別添加到菜單ID和帖子類中。

如果類和id匹配，我想添加一個「活動」類到菜單項。我正在使用航點js在滾動中添加項目，並發現了一些jQuery，如果菜單鏈接和帖子ID匹配，它就可以工作。我已經嘗試了多種方法，但我不能得到的碼位比較class和id：

// Helper functions 
function getRelatedNavigation(el){ 
    return $('nav a[href=#'+$(el).attr('id')+']'); 
} 

// Waypoints 
$('article') 
    .waypoint(function(direction) { 
    getRelatedNavigation(this).toggleClass('active', direction === 'down'); 
    }, { 
    offset: '90%' 
    }) 
    .waypoint(function(direction) { 
    getRelatedNavigation(this).toggleClass('active', direction === 'up'); 
    }, { 
    offset: function() { return -$(this).height() + 100; } 
    }); 

如何更新輔助函數來比較導航標識和物品類或更好的選擇，任何想法幫助功能？

Answer 1

閱讀大量有關jQuery的wrapAll信息SO主題可能的解決方案，在同一類合成部後，我結束了專注於一個簡單的toArray與Waypoints.Group類。我已經在使用waypoints js來實現其他一些功能，並且我能夠與group.first()和group.last()實例掛鉤。變量回調到在子菜單中爲每個項目標識的類別，並使用它們來選擇類別中標識的類別sections。

function addSubNavClass(){ 
    var catsArray = jQuery('#sub-menu li').map(function(){ return this.id }).toArray(); 
    var bottomBarHeight = jQuery('#category-bar .bar').height(), 
    jQuery.each(catsArray, function(index, cat) { 
     var catSections = jQuery('.single-section.' + cat) 
     var relatedSubNav = jQuery('#sub-menu li#' + cat) 

     catSections.waypoint({ 
     handler: function(direction) { 
      if (this === this.group.first()) { 
       relatedSubNav.toggleClass('current-menu-item', direction === 'down'); 
      } 
     }, 
      group: cat, 
      offset: '70%', 
     }); 

     catSections.waypoint({ 
     handler: function(direction) { 
      if (this === this.group.last()) { 
       relatedSubNav.toggleClass('current-menu-item', direction === 'up'); 
      } 
     }, 
      group: cat, 
      offset: function() { 
         return -jQuery(this.element).height() + bottomBarHeight + 30 
        }, 
     }); 
    }) 
}