Question

我试图基本上将高度从50px切换到200px。我写了这段代码来检查并查看高度是否为50px，如果将其设置为200，则将其任何其他值设置为50.基本上是切换功能

$('.this-row').click(function(){
console.log("click "+$('.this-row').css('height'));
if($('.this-row').css('height','50')){
    $('.this-row').css('height','200')
    }
else 
    $('.this-row').css('height','50')

 });

在css中我最初有.this行{height：50px}。现在它将检查高度并设置为200，但相反的逻辑不适用于下一次点击

Answer 1

在您的情况下，您正在使用设定器，因此您在测试之前始终将高度设置为50px。试试这个：

if ($('.this-row').css('height') == '50') {
    $('.this-row').css('height','200')
}
else 
    $('.this-row').css('height','50') 
});

您可以使用三元组来缩短它：

$row = $('.this-row');
$row.css('height', $row.css('height') == '50' ? '200' : '50');

或者甚至更好，通过使用类将UI与标记完全分开：

$('.this-row').toggleClass('tall');

.tall {
    height: 200px;
}

Answer 2

jQuerys toggleClass方法非常适用于此。

CSS：

.this-row { height: 50px; }
.height2 { height: 200px; }

jQuery的：

$('.this-row').click(function(){
    $(this).toggleClass('height2');
});

Answer 3

您想要在条件中评估高度，而不是设置它，将代码更改为以下内容：

$('.this-row').click(function(){
  var height = $('.this-row').css('height');
  console.log("click "+height);
  if(height == '50') {
    $('.this-row').css('height','200')
  }
  else {
    $('.this-row').css('height','50')
  }
});

将测试与类.this-row定义的元素关联的样式的高度值;由于您正在使用高度值几次，因此可以将其读入局部变量以减少重复处理。这个条件是测试高度是否为50px。

获取和设置CSS（）不起作用...切换高度

3 个答案: