javascript - toggleClass 只工作一次

Question

我的 toggleClass 函数只工作一次，因为我知道它必须永远工作 - 旋转并且我添加了 if else 条件我的 jquery 代码获取类名

我的 html 结构；

<div class="form-elements">
<input type="button" name="d5" class="d5"  />
<input type="button" name="d4" class="d4" />
<input type="button" name="d3" class="d3"  />
<input type="button" name="d2" class="d2" />
<input type="button" name="d1" class="d1" />                     
</div>

CSS文件

.d1 {

  background: url(https://anitur.streamprovider.net/images/otel-filtre/d1.png);
  border: 0;
 display: inline-block;
  height: 32px;
  width: 32px;    padding: 0;
    margin: 0;
}
.d1_pasif {
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d1_pasif.png);
  border: 0;
  display: inline-block;
  height: 32px;
  width: 32px;    padding: 0;
    margin: 0;
}
.d2 {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d2.png);
  border: 0;
  display: inline-block;
  height: 32px;
  width: 32px;    padding: 0;
    margin: 0;
}
.d2_pasif { background: url(https://anitur.streamprovider.net/images/otel-filtre/d2_pasif.png);

  border: 0;
  display: inline-block;
  height: 32px;
  width: 32px;    padding: 0;
    margin: 0;
}
.d3 {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d3.png);
  border: 0;
  display: inline-block;
  height: 32px;
  width: 32px;    padding: 0;
    margin: 0;
}
.d3_pasif {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d3_pasif.png);
  border: 0;
  display: inline-block;
  height: 32px;
  width: 32px;    padding: 0;
    margin: 0;
}
.d4 {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d4.png);
  border: 0;
 display: inline-block;
  height: 32px;
  width: 32px;    padding: 0;
    margin: 0;
}
.d4_pasif {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d4_pasif.png);
  border: 0;
  display: inline-block;
  height: 32px;
  width: 32px;
}
.d5 {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d5.png);
  border: 0;
  display: inline-block;
  height: 32px;
  width: 32px;
}
.d5_pasif {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d5_pasif.png);
  border: 0;
  display: inline-block;
  height: 32px;
  width: 32px;
}

这是我的js文件

$(".form-elements input[type='button']").on("click", function() {

  var el = $(this).attr("class");
    if($(this).hasClass("d1")){
    $(".d1").toggleClass('d1 d1_pasif');

}else if($(this).hasClass("d2")){

 $(".d2").toggleClass('d2 d2_pasif');

}else if($(this).hasClass("d3")){

  $(".d3").toggleClass('d3 d3_pasif');

}else if($(this).hasClass("d4")){

  $(".d4").toggleClass('d4 d4_pasif');  

}
    else if($(this).hasClass("d5")){

  $(".d5").toggleClass('d5 d5_pasif');

    }
  return false; 

});

Answer 1

有一种更简单的方法，将类添加为

.d1 {
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d1.png);
     ...
}

.d1.pasif {
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d1_pasif.png);
    ....
}

你只改变应该改变的东西，而不是所有的样式，然后就去做

$(".form-elements input[type='button']").on("click", function() {
    $(this).toggleClass('pasif');
});

FIDDLE