在两个元素之间切换一个类

Question

我有这个html：

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

​

如果您有两个以上的元素，并且希望在其余元素上添加类，并将其从已经拥有该类的元素中删除，那么您可以通过这样做来实现这一点(此函数也适用于您提到的情况)：

​

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>

​