在jQuery中切换内联CSS

Question

I want to toggle some inline CSS with a jQuery script, but I can't do it with a class, because I get the value of the padding-top dynamically, here is the function :

$('.button').click(function(){
  $(this).toggleClass('active');
});

var tagsHeight = $('span').outerHeight();

$(".button").click(function (){
  if ($(this).is('active')) {
    $(".change").css('padding-top', '0');
  }
  else if ($(this).not('active')) {
    $(".change").css('padding-top', tagsHeight);
  }
});

An a example here : https://jsfiddle.net/o1pbwfuo/

I really don't get why this is not working correctly ...

Thanks !

Answer 1

The issue with your code is due to the incorrect selector in not() . That being said, you can improve your logic by combining the click() event handlers, then using a single ternary expression to set the padding-top on the required element based on the related class. Try this:

var tagsHeight = $('span').outerHeight();

$('.button').click(function() {
  var active = $(this).toggleClass('active').hasClass('active');
  $(".change").css('padding-top', !active ? '0' : tagsHeight);
});

Working example

Answer 2

You made a mistake while using .is and .not. You need to address the class itself inclusive the dot at beginning.

$('.button').click(function(){
  $(this).toggleClass('active');
});

var tagsHeight = $('span').outerHeight();

$(".button").click(function (){
  if ($(this).is('.active')) {
    $(".change").css('padding-top', '0');
  }
  else if ($(this).not('.active')) {
    $(".change").css('padding-top', tagsHeight);
  }
});

https://jsfiddle.net/06ek4fej/

---

By the way, the else-if request is nonsense. If = true or if = false. Else If results the same as else.

$(".button").click(function (){
  if ($(this).is('.active')) {
    $(".change").css('padding-top', '0');
  }
  else {
    $(".change").css('padding-top', tagsHeight);
  }
});

Answer 3

On click you can check whether element has active class or not and there is no need to add two click methods on '.button'.

var tagsHeight = $('span').outerHeight();

$(".button").click(function (){
  $(this).toggleClass('active');
  if ($(this).hasClass('active')) {
    $(".change").css('padding-top', '0');
  }
  else{
    $(".change").css('padding-top', tagsHeight);
  }
});

Answer 4

You can use Has class method for the check is active class exist or not.

$(".button").click(function (){
  if ($(this).hasClass('active')) {
    $(".change").css('padding-top', '0');
  }
  else{
    $(".change").css('padding-top', tagsHeight);
  }
});