Javascript classList.add不起作用

Question

我有classList.add javascript函数的问题。 我试图在元素上添加“active”类，并为这些活动类应用css样式。 但是，它似乎没有用，我很难用它。 任何人都可以帮我解决这个问题吗？ 下面是我的HTML文件的当前部分和与此javascript对应的css部分。

部分：

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

与上面的javascript对应的CSS部分：

 .slide-in { opacity: 0; transition:all .5s; } .align-left { float: left; /*margin-right: 20px;*/ } .align-right { float: right; /*margin-right: 20px;*/ } .align-left.slide-in { transform:translateX(-30%) scale(0.95); } .align-right.slide-in { transform:translateX(30%) scale(0.95); } .slide-in.active { opacity: 1; transform: translateX(0%) scale(1); }

请帮我解决这个问题。

Answer 1

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>

我已将<script>标记放在<body>标记内。
在checkSlide函数中，我将clientHeight替换为height属性用法
最后我返回了debounce函数，如代码的最后一行所示，而不是调用函数，因为代码就像这个window.addEventListener('scroll', debounce(checkSlide)); debounce函数在窗口加载时被调用函数的调用。当我们使用代码window.addEventListener("scroll", function(){return debounce(checkSlide);}); 该函数被分配给该事件，并在每次事件发生时被调用。

Javascript classList.add不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-12-26 09:31:31

Javascript classList.add不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-12-26 09:31:31

解决方案1
1 已采纳 2016-12-26 09:31:31