Я хотел бы проверить, имеет ли div с определенным href также определенный класс. Я закодировал эту навигацию:

<nav>
    <div class="nav-wrapper">
        <ul class="normal-nav hide-on-med-and-down">
            <li><a class="" href="#chi">Chi Siamo</a></li>
            <li><a class="" href="#dirigenza">Dirigenza</a></li>
            <li><a class="" href="#squadre">Squadre</a></li>
            <li><a class="" href="#orariPrezzi">Orari e Prezzi</a></li>
            <li><a class="" href="#modulistica">Modulistica</a></li>
            <li><a class="" href="#contatti">Contattaci</a></li>
            <li><a class="" href="#fotogallery">Fotogallery</a></li>
        </ul>
    </div>
</nav>

Класс active добавляется к элементу <a> относительно местоположения, в котором пользователь прокручивал страницу вниз, так что <a> выглядит следующим образом:

<a class="active" href="#dirigenza">Dirigenza</a>

Я хотел бы постоянно проверять, какой элемент в normal-nav <ul> имеет класс active (у меня есть плагин scrollFire () JQuery):

$('body').scrollfire({
    // Offsets
    offset: 0,
    topOffset: 0,
    bottomOffset: 0,
    onScrollAlways: function(elm, distance_scrolled) {
    },
});

И делать некоторые вещи, если активный элемент <a> - это элемент с href="#chi", href="#dirigenza" и так далее.

Как я могу это сделать?

1
Wonderman 18 Дек 2015 в 14:05

3 ответа

Лучший ответ

Вы можете использовать $("a.active"), чтобы получить текущий помеченный как активный. Затем вы можете использовать $("a.active").attr("href"), чтобы получить значение href для этого активного элемента и использовать его в операторе if или switch для управления различными случаями.

var activeHrefValue = $("a.active").attr("href");
if (activeHrefValue == "theValueToBeChecked") {
   doSomething();
}

В вашем конкретном случае я думаю, что это может быть хорошим решением:

$('body').scrollfire({
    // Offsets
    offset: 0,
    topOffset: 0,
    bottomOffset: 0,
    onScrollAlways: function(elm, distance_scrolled) {
        switch($("a.active").attr("href")){
            case "#chi":
                doSomething(elm);
                break;
            case "...":
                doSomethingElse(elm);
                break;
            default: 
                doDefaultSomething(elm);
        }
    },
});

Эта часть переключателя может быть заменена серией операторов if-else в зависимости от ваших потребностей.

2
LucioB 18 Дек 2015 в 11:33

Вы можете использовать метод hasClass:

$('body').scrollfire({
    // Offsets
    offset: 0,
    topOffset: 0,
    bottomOffset: 0,
    onScrollAlways: function(elm, distance_scrolled) {
      if($(elm).hasClass('testingclass')){
         console.log('testingclass');
      }
    },
});
0
Bhojendra Rauniyar 18 Дек 2015 в 11:09
$("a.active[href='#chi']")

Выберет все a с классом active и чей href равен #chi.

$("a.active[href='#chi'], a.active[href='#dirigenza']")

Используйте это для нескольких hrefs

$("a.active[href='#chi']").length 

Даст количество подходящих элементов.

0
void 18 Дек 2015 в 11:08