Javascript classList.add不起作用

Question

I am having a problem with classList.add javascript function. 我有classList.add javascript函数的问题。 I am trying to add "active" class onto elements and apply css style for those active classes. 我试图在元素上添加“active”类，并为这些活动类应用css样式。 However, it doesn't seem to work and I am having hard time with it. 但是，它似乎没有用，我很难用它。 Could anyone help me with this issue? 任何人都可以帮我解决这个问题吗？ Below is the current part from my HTML file and css part that corresponds to this javascript. 下面是我的HTML文件的当前部分和与此javascript对应的css部分。

Part: 部分：

 <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 part that corresponds to above javascript: 与上面的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); }

Please help me with this issue. 请帮我解决这个问题。

Answer 1

There is nothing wrong with the classList functionality instead i have made a few changes in the code as shown below, 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>

I had placed the <script> tag inside the <body> tag . 我已将<script>标记放在<body>标记内。
In the checkSlide function i have replace the height property usage by the clientHeight 在checkSlide函数中，我将clientHeight替换为height属性用法
And finally i have returned the debounce function as seen in the last line of the code ,instead of calling the function because when the code was like this window.addEventListener('scroll', debounce(checkSlide)); 最后我返回了debounce函数，如代码的最后一行所示，而不是调用函数，因为代码就像这个window.addEventListener('scroll', debounce(checkSlide)); the debounce function got called on load of the window the call of the function was used.When we use the code window.addEventListener("scroll", function(){return debounce(checkSlide);}); debounce函数在窗口加载时被调用函数的调用。当我们使用代码window.addEventListener("scroll", function(){return debounce(checkSlide);}); the function gets assigned to that event and gets called every time that event happens. 该函数被分配给该事件，并在每次事件发生时被调用。

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