Wie man aktive Klasse nur eine li mit jquery hinzufügen?

Question

https://plnkr.co/edit/9oAmucEO0yvYDJJi8tGK?p=preview

Hallo Ich füge aktive Klasse auf Fußzeile während scrolling.Actually Wenn der Benutzer scrollen es div überprüfen kommen, ist Ansichtsfenster, wenn ja er in footer.But Zu einem bestimmten Zeitpunkt aktiv Klasse hinzufügen, wenn zwei divs in Ansichtsfenster s zwei sind Artikel ausgewählt .Aber ich brauche nur ein Element slected ist .IS ein jedes Ereignis will check div in viewport or exit` in Ansichtsfenster eingeben .Wenn ich das dann bekam ich in der Lage bin wählen nur ein Element in der Fußzeile

$(function() { 
    $("#container").scroll(function() { 
     console.log('scrolling'); 
     $('#container > div').each(function (i, left) { 
     console.log(this) 
     console.log($(this)) 
     var md = $(this).attr('data-msid'); 
     console.log($(this).isOnScreen()) 
     if($(this).isOnScreen()){ 
      $('.fC li[data-msidatrr='+md+']').addClass('active'); 
     }else { 
      $('.fC li[data-msidatrr='+md+']').removeClass('active'); 
     } 
     }) 
    }); 
    $.fn.isOnScreen = function() { 

     var win = $(window); 

     var viewport = { 
     top: win.scrollTop(), 
     left: win.scrollLeft() 
     }; 
     viewport.right = viewport.left + win.width(); 
     viewport.bottom = viewport.top + win.height(); 

     var bounds = this.offset(); 
     bounds.right = bounds.left + this.outerWidth(); 
     bounds.bottom = bounds.top + this.outerHeight(); 

     return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 


    } 
    }) 

Answer 1

Sie kann diese Zeile

hinzufügen

$('.item').removeClass('active'); 

Der resultierende Code in if-Anweisung dann sein wird:

if($(this).isOnScreen()){ 
     $('.item').removeClass('active'); 
     $('.fC li[data-msidatrr='+md+']').addClass('active'); 
    } 

Erläuterung: erste aktive Klasse entfernen aus der ganzen Liste und fügen Sie dann nur benötigt ein.

Answer 2

Ich glaube, ich für Sie eine Lösung gefunden.

Zuerst müssen Sie die $("#container").scroll Rückruf, dies ändern:

var elActive = null; 
    $('.fC li').removeClass('active'); 
    $('#container > div').each(function (i, left) { 
    var md = $(this).attr('data-msid'); 
    if($(this).isOnScreen()){ 
     elActive = $('.fC li[data-msidatrr='+md+']'); 
     //return false; // uncomment to get the first of the list 
    } 
    }); 
    if(elActive) elActive.addClass('active'); 

dies die Klasse active aus allen li Elemente entfernen und iterieren alle div s, Prüfung, die auf dem Bildschirm ist und Setzen der li für dieses Element auf Variable elActive.
Danach fügen Sie die Cass zum elActive Element hinzu.

Aber das Verhalten immer noch seltsam nur mit dieser Änderung, ich glaube, Sie auch die $.fn.isOnScreen Funktion diese ändern können:

var win = this.closest('[scrollable]') || $(window); 

    var viewport = { 
    top: win.scrollTop(), 
    left: win.scrollLeft() 
    }; 
    viewport.right = viewport.left + win.width(); 
    viewport.bottom = viewport.top + win.height(); 

    var bounds = this.offset(); 
    bounds.right = bounds.left + this.outerWidth(); 
    bounds.bottom = bounds.top + this.outerHeight(); 

    return (
     !(viewport.right < bounds.left 
      || viewport.left > bounds.right 
      || viewport.bottom < bounds.top 
      || viewport.top > bounds.bottom)); 

Dies wird die scrollTop nicht mehr überprüfen, jetzt ist die Offset-Grenzen des scrollbaren geprüft Bereich (unser neues „Ansichtsfenster“) und der Versatz der Elemente im Innern (die this Referenz innerhalb der Funktion), um uns zu sagen, ob das Element auf dem Bildschirm ist oder nicht.
Fügen Sie das scrollable Attribut auf das #container Element diese Funktion zu sehen.

Ich denke, diese Änderungen, die Sie mit dem Verhalten geben Sie erwarten. Hier

ist ein Fork von Ihrem Beispiel mit den Änderungen, die ich sagen:
https://plnkr.co/edit/bK1h0YF2tabiWPpjQUNh?p=preview