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

这样的事情会好吗？

＆＃13;

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

＆＃13;

.element-show{
color:red;
}

＆＃13;

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

＆＃13;

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>

在两个元素之间打开和关闭一个类

2 个答案: