Javascript classList.add nie działa

Mam problem z funkcją javascript classList.add. Próbuję dodać "aktywną" klasę do elementów i zastosować styl css dla tych aktywnych klas. Jednak wydaje się, że nie działa i mam z tym problemy. Czy ktoś może mi pomóc w tym problemie? Poniżej znajduje się aktualna część z mojego pliku HTML i części css, która odpowiada temu javascript.Javascript classList.add nie działa

części:

<script> 
 
    function debounce(func, wait = 20, immediate = true) { 
 
     var timeout; 
 
     return function() { 
 
     var context = this, args = arguments; 
 
     var later = function() { 
 
      timeout = null; 
 
      if (!immediate) func.apply(context, args); 
 
     }; 
 
     var callNow = immediate && !timeout; 
 
     clearTimeout(timeout); 
 
     timeout = setTimeout(later, wait); 
 
     if (callNow) func.apply(context, args); 
 
     }; 
 
    } 
 

 
    const sliderImages = document.querySelectorAll('.slide-in'); 
 

 
    function checkSlide(e) { 
 
     sliderImages.forEach(sliderImage => { 
 
     const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height/2; 
 
     const imageBottom = sliderImage.offsetTop + sliderImage.height; 
 
     const isHalfShown = slideInAt > sliderImage.offsetTop; 
 
     const isNotScrolledPast = window.scrollY < imageBottom; 
 

 
     if(isHalfShown && isNotScrolledPast) { 
 
      sliderImage.classList.add('active'); 
 
     } else { 
 
      sliderImage.classList.remove('active'); 
 
     } 
 
     }) 
 
    } 
 

 

 
    window.addEventListener('scroll', debounce(checkSlide)); 
 

 
    </script>

CSS część, która odpowiada przede javascript:

.slide-in { 
 
\t opacity: 0; 
 
\t transition:all .5s; 
 
} 
 

 
.align-left { 
 
\t float: left; 
 
\t /*margin-right: 20px;*/ 
 
} 
 

 
.align-right { 
 
\t float: right; 
 
\t /*margin-right: 20px;*/ 
 
} 
 

 
.align-left.slide-in { 
 
\t transform:translateX(-30%) scale(0.95); 
 
} 
 

 
.align-right.slide-in { 
 
\t transform:translateX(30%) scale(0.95); 
 
} 
 

 
.slide-in.active { 
 
\t opacity: 1; 
 
\t transform: translateX(0%) scale(1); 
 
}

Proszę mi pomóc wi ten problem.

Źródło

2016-12-26 Tae

której przeglądarki i wersji używasz? – GraveyardQueen

Oznaczasz to za pomocą jQuery, ale wydaje się, że nie używasz go nigdzie. Czy jest powód ku temu? –

Czy możesz też opublikować odpowiedni "html"? –

Nie ma nic złego z funkcjonalnością classList zamiast Zrobiłem kilka zmian w kodzie, jak pokazano poniżej,

<script> 
function debounce(func, wait , immediate) { 
    var timeout; 
    return function() { 
    var context = this, args = arguments; 
    var later = function() { 
     timeout = null; 
     if (!immediate) func.apply(context, args); 
    }; 
    var callNow = immediate && !timeout; 
    clearTimeout(timeout); 
    timeout = setTimeout(later, wait); 
    if (callNow) func.apply(context, args); 
    }; 
}; 

const sliderImages = document.querySelectorAll('.slide-in'); 

function checkSlide(e) { 
    sliderImages.forEach(sliderImage => { 
    const slideInAt = (window.scrollY + window.innerHeight) - (sliderImage.clientHeight/2); 
    const imageBottom = sliderImage.offsetTop + sliderImage.clientHeight; 
    const isHalfShown = slideInAt > sliderImage.offsetTop; 
    const isNotScrolledPast = window.scrollY < imageBottom; 

    if(isHalfShown && isNotScrolledPast) { 
     sliderImage.classList.add('active'); 
    } else { 
     sliderImage.classList.remove('active'); 
    } 
    }) 
} 
var myEfficientFn = debounce(function() {checkSlide();}, 20,true); 
window.addEventListener("scroll", myEfficientFn); 
</script>

miałem umieszczony znacznik <script> wewnątrz znacznika <body>.
W funkcji checkSlide mam zastąpić użycie height nieruchomości przez funkcję clientHeight
I wreszcie wróciłem czasową jak widać w ostatniej linii kodu, zamiast wywoływania funkcji, ponieważ gdy kod był tak window.addEventListener('scroll', debounce(checkSlide)); funkcja odbicia została wywołana przy obciążeniu okna, w którym wywołano wywołanie funkcji. Gdy użyjemy kodu window.addEventListener("scroll", function(){return debounce(checkSlide);});, funkcja zostanie przypisana do tego zdarzenia i zostanie wywołana za każdym razem, gdy zdarzenie się pojawi.

Źródło

2016-12-26 09:31:31 GraveyardQueen

Jeśli zamierzasz naprawić jego kod, dlaczego nie zastąpić 'add' i' remove' przy użyciu 'przełączania'? –

Nie rozumiesz konstrukcji "debounce". Jest ** niby ** zwracanie funkcji - takiej, która rozprasza przekazaną funkcję, dlatego też określenie 'debounce (checkSlide)' jest poprawne **. –

Tak, masz rację, użyłem odbicia, jak pokazano powyżej – GraveyardQueen

Javascript classList.add nie działa

Odpowiedz

Powiązane problemy