javascript - Jquery通过CSS添加和删除类

Question

希望你一切顺利

所以，我缩短故事，这里我们有一个按钮，我想响应并检查：如果标签有这些类之一，那么用另一个改变它

我该怎么做？

function bt1Func() {
  if ($("#funcp").hasClass('unhidden-pr')) {
    $("#funcp").addClass("hidden-pr");
  }
  if ($("#funcp").hasClass("hidden-pr")) {
    $("#funcp").addClass("unhidden-pr");
  }

}

.hidden-pr {
  display: none;
}

.unhidden-pr {
  display: flex;
}

#funcp {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="bt1Func()" id="bt1" class="activate style-a">Pizza</button>

<div class="container-men">
  <p id="funcp">hi</p>
</div>

标签： javascripthtmljquerycss

Answer 1

大声读出你的代码。

如果funcp 有类unhidden-pr，添加类hidden-pr，如果funcp 有类hidden-pr 添加unhidden-pr。

所以你真的应该使用一个else if或只是else。您也没有删除课程。

function bt1Func() {
  if ($("#funcp").hasClass('unhidden-pr')) {
    $("#funcp").addClass("hidden-pr").removeClass("unhidden-pr");
  } else {
    $("#funcp").addClass("unhidden-pr").removeClass("hidden-pr");
  }
}

.hidden-pr {
  display: none;
}

.unhidden-pr {
  display: flex;
}

#funcp {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="bt1Func()" id="bt1" class="activate style-a">Pizza</button>

<div class="container-men">
  <p id="funcp" class="hidden-pr">hi</p>
</div>

最后，您只是在重新发明切换类

function bt1Func(){
  $("#funcp").toggleClass('hidden-pr unhidden-pr');
}

.hidden-pr {
  display: none;
}

.unhidden-pr {
  display: flex;
}

#funcp {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="bt1Func()" id="bt1" class="activate style-a">Pizza</button>

<div class="container-men">
  <p id="funcp" class="hidden-pr">hi</p>
</div>

但是如果你正确编写你的 CSS，你真的只需要切换一个类

function bt1Func(){
  $("#funcp").toggleClass('active');
}

.pr {
  display: none;
}

.pr.active {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="bt1Func()" id="bt1" class="activate style-a">Pizza</button>

<div class="container-men">
  <p id="funcp" class="pr">hi</p>
</div>