如何將函數應用於所選元素，將jquery代碼轉換爲JS並獲取類型錯誤

Question

我正在嘗試將jquery函數更改爲vanilla JS，並且我有複製它的問題。我修復了一些錯誤，但現在我完全陷入了困境。

jQuery代碼

jQuery(window).load(function() { 
    var windowHeight, windowScrollPosTop, windowScrollPosBottom = 0; 

    function calcScrollValues() { 
     windowHeight = jQuery(window).height(); 
     windowScrollPosTop = jQuery(window).scrollTop(); 
     windowScrollPosBottom = windowHeight + windowScrollPosTop; 
    } 

    jQuery.fn.revealOnScroll = function (direction, speed) { 
     return this.each(function() { 

      var objectOffset = jQuery(this).offset(); 
      var objectOffsetTop = objectOffset.top; 

      if (!jQuery(this).hasClass("hidden")) { 

       // if argument is "right" 
       if (direction == "right") { 
        jQuery(this).css({ 
         "opacity": 0, 
         "right": "700px", 
         "position": "relative" 
        }); 
        // if argument is "left" 
       } else { 
        jQuery(this).css({ 
         "opacity": 0, 
         "right": "-700px", 
         "position": "relative" 
        }); 

       } 
       jQuery(this).addClass("hidden"); 
      } 
      if (!jQuery(this).hasClass("animation-complete")) { 

       // if the page has been scrolled far enough to reveal the element 
       if (windowScrollPosBottom > objectOffsetTop) { 
        jQuery(this).animate({"opacity": 1, "right": 0}, speed).addClass("animation-complete"); 
       } // end if the page has scrolled enough check 
      } // end only reveal the element once 
     }); 
    } 
    function revealCommands() { 
     jQuery(".title").revealOnScroll("right", 1200); 
    } 

    calcScrollValues(); 
    revealCommands(); 

    // run the following on every scroll event 
    jQuery(window).scroll(function() { 
     calcScrollValues() 
     revealCommands(); 
    }); // end on scroll 

}); 

這項工作，如果你取消註釋筆jQuery代碼。

這裏是JS代碼

function calcScrollValues() { 
    windowHeight = screen.height; 
    windowScrollPosTop = document.body.scrollTop; 
    windowScrollPosBottom = windowHeight + windowScrollPosTop; 
}; 
window.onload = function() { 
    var windowHeight, windowScrollPosTop, windowScrollPosBottom = 0; 

    function revealOnScroll(direction, speed) { 
     return this.each(function() { 
      var objectOffset = this.getBoundingClientRect(); 
      var objectOffsetTop = getBoundingClientRect(); 

      if (!this.classList.contains("hidden")) { 
       // if argument is "right" 
       if (direction == "right") { 
        this.setAttribute('style', 'opacity:0; right:700px; position: relative'); 
       } 
       ; 
       // if argument is "left" 
      } else { 
       this.setAttribute('style', 'opacity:0; right:700px; position: relative'); 
      } 
      ; 
      this.classList.add("hidden"); 
     }); 
     if (!this.classList.contains("animation-complete")) { 

      // if the page scrolled far enough to reveal the element 
      if (windowScrollPosBottom > objectOffsetTop) { 
       this.setAttribute('style', 'opacity:1; right:0; transition: speed + "ms"'); 
       this.classList.add("animation-complete"); 

      } // end if the page has scrolled enough check 

     } 
     ; // end only reveal the element once 
    } 
} 

function revealCommands() { 
    document.querySelector(".title").revealOnScroll("right", 1200); 
} 
calcScrollValues(); 
revealCommands(); 

// run the following on every scroll event 
window.addEventListener('scroll', function() { 
    calcScrollValues() 
    revealCommands(); 
}); 

我知道「返回this.each（函數（）{}」的一部分，所以無法在JS工作，不知道如何讓JS代碼。這

而另一個主要問題是這個
'document.querySelector（ 「.title僞 」）revealOnScroll（「 右」，1200）;' 顯然給出了一個類型錯誤 「不是一個函數」

。

可能還有更多這個問題，但這是我堅持的一個。

Codepen：

http://codepen.io/damianocel/pen/yYKyaN

Answer 1

你的原始代碼添加revealOnScroll方法爲.title查詢（經由jQuery.fn.revealOnScroll）時的jQuery返回的對象。通過查詢瀏覽器，您丟失了jQuery對象，但是從document.querySelectorAll('.title')取得了NodeList，而不是使用document.querySelector，因爲它只返回一個元素 - 這與您以前使用jQuery時不同）。您現在需要將revealOnScroll方法添加到NodeList的原型中，以便像使用jQuery一樣使用它。

這樣做後，你遇到了一些其他問題：NodeList看起來像，但不是Array本身沒有迭代器，但你可以借出Array.prototype.forEach。

你也失去了this綁定，但使用forEach提供的element而應該工作正常。

我還沒有完全檢查代碼。它被解釋沒有錯誤，但我不得不作出一些更改，如在onload函數內移動函數調用。

如果遇到自己無法解決的問題，請逐行檢查並報告。

function calcScrollValues() { 
 
    windowHeight = screen.height; 
 
    windowScrollPosTop = document.body.scrollTop; 
 
    windowScrollPosBottom = windowHeight + windowScrollPosTop; 
 
}; 
 
window.onload = function() { 
 
    var windowHeight, windowScrollPosTop, windowScrollPosBottom = 0; 
 

 
    NodeList.prototype.revealOnScroll = function(direction, speed) { 
 
     Array.prototype.forEach.call(self, function (element, index) { 
 
      var objectOffset = element.getBoundingClientRect(); 
 
      var objectOffsetTop = getBoundingClientRect(); 
 

 
      if (!element.classList.indexOf("hidden") !== -1) { 
 
       // if argument is "right" 
 
       if (direction == "right") { 
 
        element.setAttribute('style', 'opacity:0; right:700px; position: relative'); 
 
       }; 
 
      // if argument is "left" 
 
      } else { 
 
       element.setAttribute('style', 'opacity:0; right:700px; position: relative'); 
 
      }; 
 
      element.classList.add("hidden"); 
 
      
 
      if (element.classList.indexOf("animation-complete") === -1) { 
 
       // if the page scrolled far enough to reveal the element 
 
       if (windowScrollPosBottom > objectOffsetTop) { 
 
        element.setAttribute('style', 'opacity:1; right:0; transition: speed + "ms"'); 
 
        element.classList.add("animation-complete"); 
 
       } // end if the page has scrolled enough check 
 
      }; // end only reveal the element once 
 
     }); 
 
    } 
 
    
 
    calcScrollValues(); 
 
    revealCommands(); 
 
} 
 

 
function revealCommands() { 
 
    document.querySelectorAll(".title").revealOnScroll("right", 1200); 
 
} 
 

 
// run the following on every scroll event 
 
window.addEventListener('scroll', function() { 
 
    calcScrollValues() 
 
    revealCommands(); 
 
});

<div class="title" />