toggleClass只工作一次

Question

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

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

Answer 2

尝试这样的事情：

 $(".form-elements input[type='button']").on("click", function() {
    $(this).toggleClass($(this).attr('name')+'_pasif');

});

Answer 3

试试这个

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

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

        } else if (el == "d2") {

            $(this).toggleClass('d2_pasif');

        } else if (el == "d3") {

            $(this).toggleClass('d3_pasif');

        } else if (el == "d4") {

            $(this).toggleClass('d4_pasif');

        } else if (el == "d5") {

            $(this).toggleClass('d5_pasif');

        }
        return false;
    });

因为它是第一次工作，因为在加载dom时会出现类d1，d2等，但是一旦你使用了ToggleClass d1，就会从button中删除d2。当你第二次点击时，Jquery选择器将不起作用。

Answer 4

关于这个？

＆＃13;

＆＃13;

$(".form-elements input[type='button']").on("click", function(e) {
      var el = $(this).attr("name");
      switch(el){
          case 'd1': $(this).toggleClass('d1_pasif'); break;
          case 'd2': $(this).toggleClass('d2_pasif'); break;
          case 'd3': $(this).toggleClass('d3_pasif'); break;
          case 'd4': $(this).toggleClass('d4_pasif'); break;
          case 'd5': $(this).toggleClass('d5_pasif'); break;
      }
});

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

＆＃13;

＆＃13;

参考：.toggleClass() JQuery

Answer 5

您需要切换pasif课程而不是d1 d1_pasif - 因为默认情况下存在d1，当您第一次实际删除它并仅插入d1_pasif时切换它=＆GT;所以它无法正常工作

＆＃13;

＆＃13;

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

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

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

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

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

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

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

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

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

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

    }
  return false; 
});

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

＆＃13;

＆＃13;

＆＃13;