Question

在这里这似乎是一个菜鸟错误，但实际上我不知道它是jQuery的新功能。我想简单地做到这一点，以便在单击div时，高度在3em和10em之间切换。我不明白的是，当第二次单击div时（应用了第一个转换之后），什么也没发生。

我读过一篇类似的文章，使用.live（）方法，但这似乎也因“不是函数”错误而失败：

$('.flex-text.description').live('click', function(){
    if ($(this).css('height') == '3em') {
        $(this).css('height', '10em');
    } else {
        $(this).css('height', '3em');
    }
});

为什么会发生这种情况，如何解决？初学者的解释将非常有帮助。感谢您的任何建议。

$('.some.thing').click(function() {
	if ($(this).css('height') === '3em') {
		$(this).css('height', '10em');
	} else {
		$(this).css('height', '3em');
	}
});

div { background: red }

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

<div class='some thing'>stuff</div>

Answer 1

问题在于height属性将返回以 pixels 为单位的值：

$('.some.thing').click(function() {
  console.log($(this).css('height'));
});

div { background: red }

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

<div class='some thing'>stuff</div>

16个像素等效于一个em，因此只需将3em的条件替换为48px：

$('.some.thing').click(function() {
	if ($(this).css('height') === '48px') {
		$(this).css('height', '10em');
	} else {
		$(this).css('height', '3em');
	}
});

div { background: red }

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

<div class='some thing'>stuff</div>

Answer 2

计算的样式不是以em单位计算的。返回的值将以像素为单位。

$('.some.thing').click(function() {
	console.log($(this).css('height'));
	if ($(this).css('height') === '48px') {
		$(this).css('height', '10em');
	} else {
		$(this).css('height', '3em');
	}
});

div { background: red }

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

<div class='some thing'>stuff</div>

Answer 3

em的值取决于font-size。解决此问题的技巧是使隐藏的div和font-size相等，然后得到1em的值。

height:1em;

添加此<div class='some thing'>stuff</div> <div class='hidden thing'>stuff</div>

CSS

在隐藏和未隐藏的div { background: red } .some{ height:3em; } .thing{ font-size:20px; } .hidden{ display:none; height:1em; }中使用类thing，因为它们都具有相等的div和font-size具有hidden div height并且未被隐藏最初设置了1em；然后将其添加到JQuery代码下面。

3em

您也可以选中此fiddle

https://jsfiddle.net/shoesheill/xo9juqd3/29/

简单的jQuery if语句不能在样式之间切换

3 个答案: