[英]Moving inline javascript function to external file and convert to jQuery
[英]Convert inline javascript to external file
我正在w3school從事輪播工作。 他們實際上有一個內聯javascript代碼,我正在嘗試將其轉換為外部javascript文件。 我的外部文件中有此代碼
window.addEventListener('DOMContentLoaded', function () { var slideIndex = 1; showSlides(slideIndex); function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } }, false);
但是當我瀏覽輪播時,它會顯示錯誤Uncaught ReferenceError: currentSlide is not defined at HTMLSpanElement.onclick
,並且無法處理/導航輪播中的圖像
這是HTML代碼
<div class="slideshow"> <div class="slideshow-container"> <div class="mySlides fade"> <img class="carousel-item" src="https://lorempixel.com/800/400/food/1"> </div> <div class="mySlides fade"> <img class="carousel-item" src="https://lorempixel.com/800/400/food/2"> </div> </div> <div class="slide-nav"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> </div> </div> <script type="text/javascript" src="js/components.js"></script>
因為currentSlide
無法全局訪問(HTML內聯事件處理程序在全局范圍內運行)。 您需要在全局范圍內對其進行定義才能使其起作用:
function currentSlide(n) {
showSlides(slideIndex = n);
}
window.addEventListener("DOMContentLoaded", function() {...}, false);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.