All geek questions in one place

ToggleClass only works once

my toggleClass functions only work once, because I know that it should work forever - it’s rotated, and I added, if else, the condition that my jquery codes get classname

my html structure;

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

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

and these are my js docs

$(".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;

});

+4
source share
5 answers

There it is much easier to do this, add classes as

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

where you change only what should change, not all styles, and just

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

Fiddle

+2
source

try something like this:

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

});
0
source 

 $(".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;
    });

, d1, d2 .. dom, ToggleClass d1, d2 . JQuery , .

0

?

$(".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;
      }
});
.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;
}
<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>

ref: . toggleClass() JQuery

0

You only need to switch the class pasifnot d1 d1_pasif- because it d1exists by default and when you switch it for the first time, when you delete it and insert only d1_pasif=>, so it cannot work

$(".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; 
});
.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;
}
<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>
Run code
0
source

Source: https://habr.com/ru/post/1627916/

More articles:


All Articles