जावास्क्रिप्ट classList.add काम नहीं कर रहा है

मुझे classList.add जावास्क्रिप्ट फ़ंक्शन के साथ कोई समस्या है। मैं तत्वों पर "सक्रिय" वर्ग जोड़ने और उन सक्रिय वर्गों के लिए सीएसएस शैली लागू करने की कोशिश कर रहा हूं। हालांकि, यह काम नहीं कर रहा है और मुझे इसके साथ कठिन समय है। क्या कोई इस मुद्दे के साथ मेरी मदद कर सकता है? नीचे मेरी HTML फ़ाइल और सीएसएस भाग से वर्तमान भाग है जो इस जावास्क्रिप्ट से मेल खाता है।जावास्क्रिप्ट classList.add काम नहीं कर रहा है

भाग:

<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>

सीएसएस बात यह है कि जावास्क्रिप्ट ऊपर से मेल खाती है:

.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); 
 
}

कृपया मुझे वाई मदद इस मुद्दे को वें।

स्रोत

2016-12-26 Tae

आप किस ब्राउज़र और संस्करण का उपयोग कर रहे हैं? – GraveyardQueen

आप इसे jQuery के साथ टैग कर रहे हैं, लेकिन आप इसे कहीं भी उपयोग नहीं कर रहे हैं। क्या इसका कोई कारण है? –

क्या आप प्रासंगिक 'html' भी पोस्ट कर सकते हैं? –

classList कार्यक्षमता के बजाय मैं जैसा कि नीचे दिखाया कोड में कुछ परिवर्तन किए हैं के साथ गलत कुछ भी नहीं है,

<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>

मैं <body> टैग के अंदर <script> टैग डाला था।
checkSlide समारोह मैं बजाय फ़ंक्शन को कॉल क्योंकि जब कोड इस तरह था की, के रूप में कोड की अंतिम पंक्ति में देखा clientHeight
और अंत में मैं वापस आ गए debounce समारोह से height संपत्ति के उपयोग की जगह है में window.addEventListener('scroll', debounce(checkSlide)); विंडो के लोड पर डिबॉन्स फ़ंक्शन को कॉल किया गया था, फ़ंक्शन का कॉल इस्तेमाल किया गया था। जब हम कोड window.addEventListener("scroll", function(){return debounce(checkSlide);}); कोड का उपयोग करते हैं तो फ़ंक्शन उस ईवेंट को असाइन किया जाता है और ईवेंट होने पर हर बार कॉल किया जाता है।

स्रोत

2016-12-26 09:31:31 GraveyardQueen

यदि आप उसका कोड ठीक करने जा रहे हैं, तो 'add'' और 'remove' को 'टॉगल' के साथ क्यों न बदलें? –

आप 'debounce' के डिज़ाइन को गलत समझ रहे हैं। यह ** एक समारोह वापस करने के लिए ** माना जाता है - जो कि पारित समारोह को अस्वीकार करता है, यही कारण है कि 'debounce (checkSlide) 'निर्दिष्ट करना ** सही ** है। –

हाँ आप सही हैं, मैंने – GraveyardQueen

जावास्क्रिप्ट classList.add काम नहीं कर रहा है

उत्तर

संबंधित मुद्दे