jquery show/hide 当 class 改变时

Question

我有两个按钮，但我只希望第二个按钮显示第一个按钮是否具有特定 class（当用户单击它时会发生变化）。

这是我试过的。我没有收到任何错误，但 show/hide 不起作用。第二个按钮应该在第一个按钮有 class btn-success 时显示，否则必须隐藏。

$(document).ready(function(){
  if($(".save_ans").length && (".btn-success").length){
    $(".submit_ans").show();
  }else{
   $(".submit_ans").hide();
  }
   });

jsfiddle 示例：https://jsfiddle.net/btc6rg9d/

Answer 1

您可以使用 hasClass 来检查 save_ans 是否有 btn-success class 取决于此 hide/show 您的下一个元素。

演示代码 :

$(".save_ans").hasClass('btn-success') ? $(".submit_ans").show() :
  $(".submit_ans").hide()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<a class='btn save_ans btn-warning' href="#">Save answer</a> <br> <br>

<a class='btn  submit_ans' href="#">Submit Answers</a> <br>

jquery show/hide 当 class 改变时

jquery show/hide when class changes

jquery

show

hide

show-hide