다음 슬라이드 요소로 활성화 된 클래스 설정

Question

자바 스크립트에 대한 질문이 있습니다. 당신은

<div class="slides"> 
    <div class="slide active" id="one"></div> 
    <div class="slide" id="two"></div> 
    <div class="slide" id="third"></div> 
    <div class="slide" id="fourth"></div> 
</div> 

<button onclick="slide-down()"> 
    Next slide 
</button> 

<button onclick="slide-up()"> 
    Previous slide 
</button> 

아래에있는 내 HTML 마크 업을 찾을 수 있습니다 무엇 버튼을 슬라이드 다운에 사용자가 클릭 순수한으로 제거 할 경우 내가 할 수있는 자바 스크립트 다음 슬라이드 요소에 세트 엔 '활성'클래스?

Answer 1

당신은 하나의 기능을 사용할 수 있습니다, button.className이 기능을 클릭 패스, "prev" 및 "next"에 <button> 요소에 class을 설정; .getElementsByClassName(), .nextElementSibling, 여기

.active { 
 
    color: green; 
 
}

<div class="slides"> 
 
    <div class="slide active" id="one">one</div> 
 
    <div class="slide" id="two">two</div> 
 
    <div class="slide" id="third">third</div> 
 
    <div class="slide" id="fourth">fourth</div> 
 
</div> 
 

 
<button class="next" onclick="slide(this.className)"> 
 
    Next slide 
 
</button> 
 

 
<button class="prev" onclick="slide(this.className)"> 
 
    Previous slide 
 
</button> 
 
<script> 
 
    var active = document.getElementsByClassName("active"); 
 

 
    function slide(prevNext) { 
 
    if (prevNext === "next") { 
 
     if (active[0].nextElementSibling) { 
 
     active[0].nextElementSibling.className = "active"; 
 
     active[0].className = ""; 
 
     } 
 
    } else { 
 
     if (active[0].previousElementSibling) { 
 
     active[0].previousElementSibling.className = "active"; 
 
     active[active.length - 1].className = ""; 
 
     } 
 
    } 
 
    } 
 
</script>

Answer 2

다음과 같은 것이 작동합니다. 많은 자바 스크립트 DOM 프로퍼티와 메소드를 사용합니다. 하이픈은 함수의 이름에서 유효하지 않으므로 함수의 이름을 약간 변경해야합니다. 필자는 밑줄로 바꿨다.

function slide_down(){ 
 
    var elems = document.querySelectorAll(".slide"); 
 
    var curr = document.querySelector(".active"); 
 
    curr.classList.remove("active"); 
 
    if(curr.nextElementSibling) 
 
     curr.nextElementSibling.classList.add("active"); 
 
    else 
 
     elems[0].classList.add("active"); 
 
} 
 

 
function slide_up(){ 
 
    var elems = document.querySelectorAll(".slide"); 
 
    var curr = document.querySelector(".active"); 
 
    curr.classList.remove("active"); 
 
    if(curr.previousElementSibling) 
 
     curr.previousElementSibling.classList.add("active"); 
 
    else 
 
     elems[elems.length-1].classList.add("active"); 
 
}

.active{background-color:red}

<div class="slides"> 
 
    <div class="slide active" id="one">1</div> 
 
    <div class="slide" id="two">2</div> 
 
    <div class="slide" id="third">3</div> 
 
    <div class="slide" id="fourth">4</div> 
 
</div> 
 

 
<button onclick="slide_down()"> 
 
    Next slide 
 
</button> 
 

 
<button onclick="slide_up()"> 
 
    Previous slide 
 
</button>

Answer 3

.previousElementSibling은 내가 쓴 예입니다. Jasmiec은 내가 끝나기 전에 대답했고 솔직히이 예제에서 사용 된 여러 가지 방법 중 일부를 좋아합니다. 이미 언급했듯이, 하이픈이 이름을 유효하지 않게 만들기 때문에 함수의 이름을 변경해야합니다.

<div class="slides"> 
    <div class="slide active" id="one"></div> 
    <div class="slide" id="two"></div> 
    <div class="slide" id="three"></div> 
    <div class="slide" id="four"></div> 
</div> 

<button onclick="slideDown()"> 
    Next slide 
</button> 

<button onclick="slideUp()"> 
    Previous slide 
</button> 

<script> 
var slides = ["one", "two", "three", "four"] 
function slideDown() { 
    var element = document.getElementsByClassName('active')[0]; 
    var index = slides.indexOf(element.id) + 1; 
    if (index < slides.length) { 
    element.className = "slide"; 
    document.getElementById(slides[index]).className = "slide active"; 
    } 
} 

function slideUp() { 
    var element = document.getElementsByClassName('active')[0]; 
    var index = slides.indexOf(element.id) - 1; 
    if (index >= 0) { 
    element.className = "slide"; 
    document.getElementById(slides[index]).className = "slide active"; 
    } 
} 
</script>