Question

如何让jQuery将id与属性进行比较，如果匹配，则将.active类添加到具有匹配属性的元素中？

我试图重构一个冗长且重复的jQuery代码。我已设置航点在滚动时触发，一旦到达某个部分，它就会在引用该部分的菜单链接中添加一个活动类。这是我能管理的最好的，但它不起作用。

$('section').waypoint(function(direction) {
  if (direction === 'down') {
    $('nav a').removeClass('active-nav');
    var linkName = $('nav a').map( function() {
    return $(this).attr('href');
    }).get();
    if(linkName == $('section[id]')){
         $(this).addClass('active-nav');
        }
  }
}, {
  offset: '25%'
});

这背后的想法是我的部分id与菜单链接的href值相同（它是一个锚点书签），所以我的逻辑是：比较{ {1}} section id值，如果它们与nav a href匹配此菜单链接。我怎样才能实现这个逻辑？

a-如何获取addClass .active中所有链接的href？

b-如何将其与nav和section id与匹配的导航链接进行比较？

我的HTML看起来像这样：

addClass

我现在的jQuery看起来像这样

<nav>
 <a id="b1" href="#landing">Home</a>
 <a id="b2" href="#portfolio">Portfolio</a>
 <a id="b3" href="#experience">Experience</a>
 <a id="b4" href="#about">About</a>
</nav>

<section id="landing">some content</section>
<section id="portfolio">some content</section>
<section id="experience">some content</section>
<section id="about">some content</section>

哪个工作正常，但必须分别对每个部分重复。

Answer 1

您可以使用id选择器，而不是使用每个部分的section并附加处理程序：

// this event is called for all sections.
$('section').waypoint(function(direction) {
  if (direction === 'down') {
    $('nav a').removeClass('active-nav');

    // form the selector dynamically.
    // "this" keyword refers waypoint object and the element is located at "this.element"
    // using "this.element.id", get the nav anchor you want to target
    // example: "nav a[href='#landing']"

    var selector = "nav a[href='#" + this.element.id + "']"; 
    $(selector).addClass('active-nav');
  }
}, {
  offset: '25%'
});

$('section').waypoint(function(direction) {
  if (direction === 'up') {
    $('nav a').removeClass('active-nav');
    var selector = "nav a[href='#" + this.element.id + "']"; 
    $(selector).addClass('active-nav');
  }
}, {
  offset: '-25%'
});

有多种方法可以获得所需的目标元素。在您的情况下，由于section和a元素的顺序相同，您可以使用.index()和eq(n)（重要：您需要用“div”index()封装你的部分来工作。）

// this event is called for all sections.
$('section').waypoint(function(direction) {
  if (direction === 'down') {
    $('nav a').removeClass('active-nav');
    $("nav a").eq($(this.element).index()).addClass('active-nav');
  }
}, {
  offset: '25%'
});

我为第二种方式创建了fiddle。测试一下，让我知道。

jQuery - 获取多个元素的属性并将其与其他元素匹配。 IDS？

1 个答案: