Js .classList.add() 无法正常工作

Question

I'm in a procces of creaing simple movie site.我正在创建简单的电影网站。 cruntly working there home page. cruntly 在那里工作的主页。 in the home page there is a carosol.在主页上有一个carosol。

in CSS I hidden the visibility of all slide.在 CSS 中，我隐藏了所有幻灯片的可见性。 what I'm going do is in JS creat a array for all silds and switch between silds when I clicked the arrow icon.我要做的是在 JS 中为所有 silds 创建一个数组，并在我单击箭头图标时在 silds 之间切换。

as a first stem I want to active 1st slide when we load the web.作为第一个词干，我想在加载网页时激活第一张幻灯片。 so I used .classList.add() property to active 1st element of the array.所以我使用 .classList.add() 属性来激活数组的第一个元素。 but it's not work propaly.但它不起作用。

please help to short this out.请帮助缩短这一点。

 let left=document.querySelector('.left'); let right=document.querySelector('.right'); let av2012 = document.querySelectorAll('.Av2012'); let av2015 = document.querySelectorAll('.Av2015'); let av2018 = document.querySelectorAll('.Av2018'); let av2019 = document.querySelectorAll('.Av2019'); let slides=[av2012,av2015,av2018,av2019]; let index=0; let active= slides[index].classList.add('active');

 body{ font-family: 'Roboto', sans-serif; margin: 20px 40px 0 40px; } .head{ display: flex; justify-content: space-between; } ul{ list-style: none; display: flex; gap: 100px; } #searchBar{ width: 600px; height: 50px; border-radius: 17px; } input{ font-size: 1.5em; position: relative; left:20px; } button{ border: none; background-color: transparent; position: relative; left:-50px; top: 5px; z-index: 10; cursor: pointer; } .arrow{ display: flex; justify-content: space-between; align-items: center; height: 100vh; } .left, .right{ cursor: pointer; z-index: 10; } .right{ transform: rotatey(180deg); } .movies{ display: flex; justify-content: space-evenly; top:-550px; position: relative; } .active{ visibility: visible; } .deactive{ visibility: hidden; } .Av2012, .Av2015, .Av2018, .Av2019{ width: 800px; display: flex; align-items: center; gap: 30px; position: absolute; visibility: hidden; } h2, h3{ margin-top: 0; margin-bottom: 0; } .about{margin-top: 20px;}

 <body> <div class="head"> <div class="logo"> <img src="Assets\logo.png" alt="website logo" width="60px" height="60px"> </div> <div class="searchBar"> <form action="search"> <input type="text" placeholder="Find HD Movies and TV show" name="seach" id="searchBar"> <button> <img src="Assets\search icon.svg" alt="searchIcon"> </button> </form> </div> <div class="navigation"> <ul> <li>Genre</li> <li>Year</li> <li>Rating</li> </ul> </div> </div> <div class="arrow"> <div class="left"> <img src="Assets\left arrow.svg" alt="go left side"> </div> <div class="right"> <img src="Assets\left arrow.svg" alt="go right side"> </div> </div> <div class="movies"> <div class="Av2012"> <div class="poster"><img src="Assets\The Avengers 2012.jpg" alt="avengers 2012 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>The Avengers 2012 </h2></div> <div class="rating"><h3>8/10 IMDb</h3></div> <div class="about">Nick Fury is compelled to launch the Avengers Initiative when Loki poses a threat to planet Earth. His squad of superheroes put their minds together to accomplish the task.</div> </div> </div> <div class="Av2015"> <div class="poster"><img src="Assets\The Avengers 2015.jpg" alt="avengers 2015 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>Avengers: Age of Ultron 2015 </h2></div> <div class="rating"><h3>7.3/10 IMDb</h3></div> <div class="about">Tony Stark builds an artificial intelligence system named Ultron with the help of Bruce Banner. When the sentient Ultron makes plans to wipe out the human race, the Avengers set out to stop him.</div> </div> </div> <div class="Av2018"> <div class="poster"><img src="Assets\The Avengers 2018.jpg" alt="avengers 2018 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>Avengers: Infinity War 2018 </h2></div> <div class="rating"><h3>8.4/10 IMDb</h3></div> <div class="about">The Avengers must stop Thanos, an intergalactic warlord, from getting his hands on all the infinity stones. However, Thanos is prepared to go to any lengths to carry out his insane plan.</div> </div> </div> <div class="Av2019"> <div class="poster"><img src="Assets\The Avengers 2015.jpg" alt="avengers 2019 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>Avengers: Endgame 2019</h2></div> <div class="rating"><h3>8.4/10 IMDb</h3></div> <div class="about">After Thanos, an intergalactic warlord, disintegrates half of the universe, the Avengers must reunite and assemble again to reinvigorate their trounced allies and restore balance.</div> </div> </div> </div> <script src="script.js"></script> </body>

Answer 1

In JS, querySelectorAll returns an array of results since you're searching for all occourances.在 JS 中，querySelectorAll 返回一个结果数组，因为您正在搜索所有出现。 All you should need to do is get index 0 of the result:您需要做的就是获取结果的索引 0：

 let left=document.querySelector('.left'); let right=document.querySelector('.right'); let av2012 = document.querySelectorAll('.Av2012')[0]; let av2015 = document.querySelectorAll('.Av2015')[0]; let av2018 = document.querySelectorAll('.Av2018')[0]; let av2019 = document.querySelectorAll('.Av2019')[0]; let slides=[av2012,av2015,av2018,av2019]; let index=0; let active= slides[index].classList.add('active');

 body{ font-family: 'Roboto', sans-serif; margin: 20px 40px 0 40px; } .head{ display: flex; justify-content: space-between; } ul{ list-style: none; display: flex; gap: 100px; } #searchBar{ width: 600px; height: 50px; border-radius: 17px; } input{ font-size: 1.5em; position: relative; left:20px; } button{ border: none; background-color: transparent; position: relative; left:-50px; top: 5px; z-index: 10; cursor: pointer; } .arrow{ display: flex; justify-content: space-between; align-items: center; height: 100vh; } .left, .right{ cursor: pointer; z-index: 10; } .right{ transform: rotatey(180deg); } .movies{ display: flex; justify-content: space-evenly; top:-550px; position: relative; } .active{ visibility: visible; } .deactive{ visibility: hidden; } .Av2012, .Av2015, .Av2018, .Av2019{ width: 800px; display: flex; align-items: center; gap: 30px; position: absolute; visibility: hidden; } h2, h3{ margin-top: 0; margin-bottom: 0; } .about{margin-top: 20px;}

 <body> <div class="head"> <div class="logo"> <img src="Assets\logo.png" alt="website logo" width="60px" height="60px"> </div> <div class="searchBar"> <form action="search"> <input type="text" placeholder="Find HD Movies and TV show" name="seach" id="searchBar"> <button> <img src="Assets\search icon.svg" alt="searchIcon"> </button> </form> </div> <div class="navigation"> <ul> <li>Genre</li> <li>Year</li> <li>Rating</li> </ul> </div> </div> <div class="arrow"> <div class="left"> <img src="Assets\left arrow.svg" alt="go left side"> </div> <div class="right"> <img src="Assets\left arrow.svg" alt="go right side"> </div> </div> <div class="movies"> <div class="Av2012"> <div class="poster"><img src="Assets\The Avengers 2012.jpg" alt="avengers 2012 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>The Avengers 2012 </h2></div> <div class="rating"><h3>8/10 IMDb</h3></div> <div class="about">Nick Fury is compelled to launch the Avengers Initiative when Loki poses a threat to planet Earth. His squad of superheroes put their minds together to accomplish the task.</div> </div> </div> <div class="Av2015"> <div class="poster"><img src="Assets\The Avengers 2015.jpg" alt="avengers 2015 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>Avengers: Age of Ultron 2015 </h2></div> <div class="rating"><h3>7.3/10 IMDb</h3></div> <div class="about">Tony Stark builds an artificial intelligence system named Ultron with the help of Bruce Banner. When the sentient Ultron makes plans to wipe out the human race, the Avengers set out to stop him.</div> </div> </div> <div class="Av2018"> <div class="poster"><img src="Assets\The Avengers 2018.jpg" alt="avengers 2018 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>Avengers: Infinity War 2018 </h2></div> <div class="rating"><h3>8.4/10 IMDb</h3></div> <div class="about">The Avengers must stop Thanos, an intergalactic warlord, from getting his hands on all the infinity stones. However, Thanos is prepared to go to any lengths to carry out his insane plan.</div> </div> </div> <div class="Av2019"> <div class="poster"><img src="Assets\The Avengers 2015.jpg" alt="avengers 2019 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>Avengers: Endgame 2019</h2></div> <div class="rating"><h3>8.4/10 IMDb</h3></div> <div class="about">After Thanos, an intergalactic warlord, disintegrates half of the universe, the Avengers must reunite and assemble again to reinvigorate their trounced allies and restore balance.</div> </div> </div> </div> <script src="script.js"></script> </body>

Answer 2

Try this尝试这个

let slides = [...av2012,...av2015,...av2018,...av2019];

This (...) is called spread operator it gives you the elements of an array这个 (...) 称为扩展运算符，它为您提供数组的元素

Js .classList.add() 无法正常工作

问题描述

2 个解决方案

解决方案1
0 2022-07-23 06:55:53

解决方案2
0 已采纳 2022-07-23 06:59:02

Js .classList.add() 无法正常工作

问题描述

2 个解决方案

解决方案1 0 2022-07-23 06:55:53

解决方案2 0 已采纳 2022-07-23 06:59:02

解决方案1
0 2022-07-23 06:55:53

解决方案2
0 已采纳 2022-07-23 06:59:02