Как получить идентификатор $ this с помощью jQuery и путевых точек

Я пытаюсь захватить идентификатор элемента путевой точки, а затем добавить это значение идентификатора как класс в тело, когда прокрутка достигает этой путевой точки. Однако это не работает.

HTML

<body class="bg-1"> 
<div id="content"> 
    <div class="cover"> 
     <h2>Title</h2> 
     <p class="keep-scrolling">Keep scrolling along</p> 
    </div> 
    <section class="stats"> 
     <article id="bg-1"> 
      /* stuff */ 
     </article> 
     <article id="bg-2"> 
      /* stuff */ 
     </article> 
     <article id="bg-3"> 
      /* stuff */ 
     </article> 
     <article id="bg-4"> 
      /* stuff */ 
     </article> 
    </section> 
</div> 
</body>

Javascript

$(function() { 
    $("article").waypoint(function(direction) { //callback when waypoint is reached, with direction of scroll as a parameter 
    var $this = $(this); // caching the waypoint element 

    if($this.attr("id") == "bg-1") { 
     $("body").removeClass(); 
     $("body").addClass('bg-1'); 
    } else if($this.attr("id") == "bg-2") { 
     $("body").removeClass(); 
     $("body").addClass("bg-2"); 
    } else if($this.attr("id") == "bg-3") { 
     $("body").removeClass(); 
     $("body").addClass("bg-3"); 
    } else if($this.attr("id") == "bg-4") { 
     $("body").removeClass(); 
     $("body").addClass("bg-4"); 
    } else { 
     $("body").addClass("bg-1"); 
    }; 

    }); 
});

Я несколько способ захватить ID, но не может получить правильный синтаксис.

источник

2016-10-06 mapk

Вы используете обратный вызов функцию Точки неправильно.

Отсносящийся к API это должен работать для вас:

$(function() { 
    $("article").waypoint({ 
    handler: function(direction) { 
     $("body").removeClass(function(index, css) { 
     return (css.match(/(^|\s)bg-\S+/g) || []).join(' '); 
     }); 
     //or $("body").removeClass(); 
     $("body").addClass(this.element.id); 
    } 
    }); 
});

Я подправил свое решение немного больше:

Удалить все классы от тела, начиная с bg- (см this ответа для справки)
добавить id как класс (удалена ненужная конструкция «)»

Example

источник

2016-10-06 17:02:51 empiric

Это здорово, спасибо! Однако я прочитал [этот ответ] (http://stackoverflow.com/questions/1424981/how-to-remove-all-css-classes-using-jquery#1424991) о '.removeClass()' не нуждающийся в параметр. Кроме того, я узнал [отсюда] (http://imakewebthings.com/waypoints/guides/jquery-zepto/), что вы можете передать параметр обработчика в качестве первого аргумента для путевой точки. – mapk

@mapk Да, вы правы с помощью removeClass. Я это испортил. Но '$ (this)' в обработчике-функции не содержит путевую точку. «Это» - это объект путевой точки, содержащий фактический элемент. – empiric

Спасибо за разъяснение. – mapk

mapk, you $ это связано с ответом вашего селектора jquery, в вашем случае он извлекает список элементов статей, а ваш алгоритм обрабатывает его как один.

Рассмотрит использовать Еогеасп внутри кода

$(function() { 
    $("article").waypoint(function(direction) { //callback when waypoint is reached, with direction of scroll as a parameter 
    $(this).each(function(i,val){ 
    var $this = $(val); // caching the waypoint element 

    if($this.attr("id") == "bg-1") { 
     $("body").removeClass(); 
     $("body").addClass('bg-1'); 
    } else if($this.attr("id") == "bg-2") { 
     $("body").removeClass(); 
     $("body").addClass("bg-2"); 
    } else if($this.attr("id") == "bg-3") { 
     $("body").removeClass(); 
     $("body").addClass("bg-3"); 
    } else if($this.attr("id") == "bg-4") { 
     $("body").removeClass(); 
     $("body").addClass("bg-4"); 
    } else { 
     $("body").addClass("bg-1"); 
    }; 


    }); 

    }); 
});

источник

2016-10-06 16:58:39

Как получить идентификатор $ this с помощью jQuery и путевых точек

ответ

Смежные вопросы