单击时更改页面的功能没有理由工作

Question

所以我试图制作一个类似于 w3schools 的功能。 该功能需要管理两件事。 1.在当前页面被调用时将“.active”类添加到一个点。 2.当用户点击点进入该页面时。

在我的代码中，如果我在通过函数 Example(dots[sliderIndex].classList.add("active");) 添加类时留出一些空间，现在它可以单击并进入该页面，但是如果我剪切空间（点[sliderIndex].classList.add("active");) 现在显示活动状态，但点击点不起作用。 这让我很困惑......如果你能向我解释背后的逻辑以及如何进行这项工作，请伙计们

 // *Second Slider* var sliderIndex = 0; let next2 = document.querySelector(".next2"); let prev2 = document.querySelector(".prev2"); function showNews(n) { debugger; const slider = document.getElementsByClassName("news"); const dots = document.getElementsByClassName("dot"); for (i = 0; i < slider.length; i++) { slider[i].style.display = "none"; } if (n < 0) { sliderIndex = slider.length - 1; } if (n > slider.length - 1) { sliderIndex = 0; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", " "); } slider[sliderIndex].style.display = "block"; dots[sliderIndex].classList.add(" active"); } function currentSlide(n) { showNews((sliderIndex = n)); } function incrementSlides2(n) { showNews((sliderIndex += n)); } next2.addEventListener("click", function() { incrementSlides2(1); }); prev2.addEventListener("click", function() { incrementSlides2(-1); }); showNews(sliderIndex);

 #section-three .slideshow-container2 .wiew-more:hover { color: #242121; } #section-three .slideshow-container2 #dots { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #section-three .slideshow-container2 .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; -webkit-transition: background-color 0.6s ease; transition: background-color 0.6s ease; } #section-three .slideshow-container2 .dot:hover, #section-three .slideshow-container2 .dot.active { background: black; } .active { background: red }

 <section id="section-three"> <div class="container slideshow-container2"> <div class="news"> <div class="news-content"> <div class="buttons"> <a class="btn company-btn" href="#">COMPANY NEWS</a> <a class="btn industry-btn" href="#">INDUSTRY NEWS</a> </div> <h1>OUR PEOPLE ARE OUT STONGEST ASSET </h1> </div> </div> <div class="news news2"> <div class="news2-content"> <div class="buttons"> <a class="btn company-btn" href="#">COMPANY NEWS</a> <a class="btn industry-btn" href="#">INDUSTRY NEWS</a> </div> <h1 class="media-room">MEDIA ROOM </h1> </div> </div> <div id="dots"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> </div> <a href="javascript:void(0);" class="prev2"></a> <a href="javascript:void(0);" class="next2"></a> </div> </section>

Answer 1

不需要很多功能，只需几个功能即可完成所需的功能。

所以让我们澄清事情是如何运作的：

• div.news最初是隐藏的。
• 点（ span.dot元素）在页面加载时由JavaScript添加以使其更具动态性，因此在添加新div.news （或在后台创建页面时），您无需手动添加新点。
• 两个data-*被添加到标记中：
  • data-slideshow-index ：添加到span.dot元素（如我上面所说的由JavaScript完成），其中包含div.news的索引，当点击该点div.news将显示div.news 。
  • data-slideshow-role ：添加到a.cycle （上a和下一个功能的最后两个a标签），它定义了a.cycle的角色（ next或prev ）。
• 需要显示div.news索引的函数具有显示/隐藏功能（甚至是点的类操作）。
• 类（ active ）用于显示幻灯片（ div.news ），因此不再使用.style.display 。
• 从技术上讲，没有使用显式循环（换句话说没有for循环），所有循环都完成了内置的forEach 、 map 、 find和findIndex方法。
• 此外，使用addEventListener方法在JavaScript部分直接处理事件。

所以让我们保持简短，这是一个有效的演示，它还包含大量有用的评论，可以帮助您阅读（主要是JavaScript部分）：

 /** * news: an array that stores the "div.news" found in the page. * dotsWrapper: the "div#dots" in where the "span.dot" are going to be added on page load. * nextPrev: an array that holds the next and prev anchor tags(those with "data-slideshow-role"). * showSlide(idx): the function that does the show/hide for the slides ("div.news"). @param idx the index of the "div.news" to be shown. * roles: a plain object that holds two helper functions used by "a.cycle" in order to distinguish which role (show the next or prev slide) based on their "data-slideshow-role" and the index of the "div.news" to be shown. * dots: an array (populated on page load) that stores the "span.dot" elements. **/ const news = [...document.querySelectorAll('.news')], dotsWrapper = document.getElementById('dots'), nextPrev = [...document.querySelectorAll('.cycle')], showSlide = idx => { /** get the current shown slide **/ const currVisible = news.find(el => el.classList.contains('visible')), /** gets the currently active "span.dot" **/ currActive = dots.find(d => d.classList.contains('active')); /** hide the last shown slide **/ currVisible && currVisible.classList.remove('visible'); /** show the slide at the index "idx" **/ news[idx].classList.add('visible'); /** remove "active" class from the last active "span.dot" **/ currActive && currActive.classList.remove('active'); /** the "span.dot" at the index "idx" becomes active **/ dots[idx].classList.add('active'); }, roles = { /** function to do the show next slide role **/ next: idx => idx === news.length - 1 ? showSlide(0) : showSlide(idx + 1), /** function to do the show previous slide role **/ prev: idx => idx === 0 ? showSlide(news.length - 1) : showSlide(idx - 1) } let dots = null; (() => { /** based on how many "div.news" on the page add a "span.dot" for each one (loop). * @param el: the current element in the loop through "div.news" arrays (news array). * @param idx its index **/ dotsWrapper.append(...news.map((el, idx) => { /** create new "span" element **/ const newDot = document.createElement('span'); /** add "dot" class to it **/ newDot.classList.add('dot'); /** add data-slideshow-index to it that holds the index of the "div.news" on that dot points **/ newDot.dataset.slideshowIndex = idx; /** add click handler **/ newDot.addEventListener('click', () => { /** if the we click on the currently active dot don't do anything **/ if(idx == news.find(el => el.classList.contains('visible')).dataset.slideshowIndex) return; /** show the "div.news" at the index "idx" **/ showSlide(idx); }); /** if "idx" = 0 (first "div.news") on the page show it (add "visible class") and add "active" class to the corresponding dot **/ idx === 0 && (newDot.classList.add('active'), el.classList.add('visible')); /** return the created dot **/ return newDot; })); /** now the dots are added to the DOM so we can select them to be used while clicking the spans or the anchors **/ dots = [...dotsWrapper.querySelectorAll('.dot')]; })(); /** * loop though the prev and next anchors. * @pram e the click event object. **/ nextPrev.forEach(el => { el.addEventListener('click', e => { /** revent default click behavior **/ e.preventDefault(); /** call the corresponding function on "roles" object based on the role of the clicked "a" element and send to it the index of the currently visible "div.news" element **/ roles[el.dataset.slideshowRole](news.findIndex(el => el.classList.contains('visible'))); }); });

 #section-three .slideshow-container2 .wiew-more:hover { color: #242121; } #section-three .slideshow-container2 #dots { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #section-three .slideshow-container2 .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; -webkit-transition: background-color 0.6s ease; transition: background-color 0.6s ease; } #section-three .slideshow-container2 .dot:hover, #section-three .slideshow-container2 .dot.active { background: black; } .news { /** the news div are hidden by default and only the first one in the page will be shown by "JavaScript" **/ display: none; } /** this class is used to show a slide ("div.news") **/ .news.visible { display: block; }

 <!-- the "span.dot" are now added by "JavaScript" according to the number of "div.news" on the page --> <!-- added two "data-*" attributes : data-slideshow-index: the index of "div.news" which the "span.dot" points to (remember! the "span.dots" are added by "JavaScript"). data-slideshow-role: the role (can be either "next" or "prev") of the "a.cycle" element (the last two anchor tags). --> <section id="section-three"> <div class="container slideshow-container2"> <div class="news"> <div class="news-content"> <div class="buttons"> <a class="btn company-btn" href="#">COMPANY NEWS</a> <a class="btn industry-btn" href="#">INDUSTRY NEWS</a> </div> <h1>OUR PEOPLE ARE OUT STONGEST ASSET </h1> </div> </div> <div class="news news2"> <div class="news2-content"> <div class="buttons"> <a class="btn company-btn" href="#">COMPANY NEWS</a> <a class="btn industry-btn" href="#">INDUSTRY NEWS</a> </div> <h1 class="media-room">MEDIA ROOM </h1> </div> </div> <!-- the next "div#dots" will be populated by `JavaScript` that adds "span.dot" according to the number of "div.news" in the page --> <div id="dots"></div> <!-- added "cycle" class (to be used by "JavaScript" for now) and data-slideshow-role attribute --> <a href="javascript:void(0);" class="cycle" data-slideshow-role="prev">prev</a> <a href="javascript:void(0);" class="cycle" data-slideshow-role="next">next</a> </div> </section>