【发布时间】:2018-03-29 20:18:57
【问题描述】:
我正在使用Unslider,滑块工作正常。
我在每个 <li> 和 <h1> 中都有作为幻灯片的标题。
我有一个 resizeH1() 函数来调整这个<h1>:
function resizeH1() {
var $h1 = $('.entry-header h1');
if (window.innerWidth >= 768) {
// Calculate the total height of the element
var totalHeight = ($h1.height());
var numOfLines = totalHeight / 88;
// Force this element height to always be 88px
$h1.height(88);
// Adjust $h1 font-size depending on it's number of lines
if (numOfLines === 2) {
$h1.css('font-size', '42px');
} else if (numOfLines === 3) {
$h1.css('font-size', '40px');
} else if (numOfLines === 4) {
$h1.css('font-size', '38px');
} else if (numOfLines >= 5) {
$h1.css('font-size', '28px');
}
// Align the $h1 text verticaly at the very end
if (numOfLines >= 2) {
$h1.css({
'text-align': 'center',
'display': 'flex',
'justify-content': 'center',
'align-items': 'flex-end'
});
}
} else {
// Reset the $h1 state when (window.innerWidth < 768)
$h1.css({
'height': '',
'font-size': '',
'text-align': '',
'display': '',
'justify-content': '',
'align-items': ''
});
}
}
我的问题是这个函数只适用于第一个<h1>的第一个<li>,
和其他<h1> 的其他<li> 得到相同的font-size 作为第一个!
如何在每个<li> 上运行resizeH1() 而不仅仅是第一个?
在发布之前,我已经尝试了我所知道的所有内容并进行了很多搜索。
非常感谢您的任何建议/帮助。
【问题讨论】:
-
在不知道您的 html 结构的情况下很难判断。如果您提供Minimal, Complete, and Verifiable example,我会很棒。