来回切换元素两者之间的类

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>