在jQuery中切换内联CSS

Question

我想用jQuery脚本切换一些内联CSS,但是我不能用类来做,因为我动态得到了padding-top的值,这里是函数:

$('.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/o1pbwfuo/

我真的不明白为什么这不能正常工作......

谢谢 !

Answer 1

您的代码的问题是由于错误的选择器not().话虽这么说,您可以通过组合click()事件处理程序来改进逻辑,然后使用单个三元表达式padding-top根据相关类设置所需元素.试试这个:

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

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

工作实例