次のスライド要素にアクティブなクラスを設定

Question

Javascriptに関する質問があります。 あなたは、これは次のスライド要素にセット途中

<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> 

ボタンスライドダウン上のユーザーのクリックではJavaScriptクラス「アクティブ」純粋に削除する場合、私は何ができるの下に私のHTMLマークアップを見つけることができますか？

Answer 1

あなたは、単一の機能を使用することができ、"prev"と"next"に<button>要素でclassを設定し、機能するようにbutton.classNameをクリック渡します。 .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

次のようなものが動作します。多くのjavascriptのDOMプロパティとメソッドを使用します。ハイフンは関数の名前では有効ではないので、関数の名前を少し変更する必要があります。 Iveはアンダースコアに置き換えられました。

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>