來回切換元素兩者之間的類

Question

我有這個網站：

<div class="container"> 
    <div id="element-1" class="element-show"></div> 
    <div id="element-2"></div> 
</div> 

我想通過這門課element-show從element-1，並展現在element-2，反之亦然隱藏;從jQuery中的一個函數調用。

任何方式，我可以做到這一點嗎？

Answer 1

會是這樣的事情嗎？

$("button").on("click", function(e){ 
 
    $('.container').children("div").toggleClass("element-show"); 
 
})

.element-show{ 
 
color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="element-1" class="element-show">x</div> 
 
    <div id="element-2">y</div> 
 
</div> 
 
<button>Toggle class</button>

Answer 2

可以實現，通過這樣做：

function getClass() { 
 
    var children_container = document.getElementsByClassName("container")[0].children; 
 

 
    for (var i = 0; i < children_container.length; i++) { 
 
    if ($(children_container[i]).hasClass('element-show')) { 
 
     $(children_container[i]).removeClass(); 
 
     if (i == "0") { 
 
     $(children_container[1]).addClass("element-show"); 
 
     break; 
 
     } else if (i == "1") { 
 
     $(children_container[0]).addClass("element-show"); 
 
     break; 
 
     } 
 
    } 
 
    }; 
 
}; 
 

 
getClass();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div id="element-1" class="element-show"></div> 
 
    <div id="element-2"></div> 
 
</div>

如果你有2組以上的元素，你要添加的其他類並將它從已經擁有該類的元素中移除，那麼您可以實現這一點通過這樣做，（這個功能也會對你也提到的情況下工作）：

function getClass() { 
 
    var children_container = document.getElementsByClassName("container")[0].children; 
 
    var class_elem; 
 
    for (var i = 0; i < children_container.length; i++) { 
 
    if ($(children_container[i]).hasClass('element-show')) { 
 
     class_elem = i; 
 
     $(children_container[i]).removeClass(); 
 
     i = 0; 
 
    } 
 
    if (class_elem != undefined) { 
 
     if (i != class_elem) { 
 
     $(children_container[i]).addClass('element-show'); 
 
     } 
 
    }; 
 
    }; 
 
}; 
 

 
getClass();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="element-0"></div> 
 
    <div id="element-1" class="element-show"></div> 
 
    <div id="element-2"></div> 
 
    <div id="element-3"></div> 
 
    <div id="element-4"></div> 
 
</div>