多滑块高度统一失效:最高滑块未生效问题排查请求
问题排查与解决方案
我来帮你搞定这个滑块高度统一的问题,主要有两个核心问题导致最高高度没生效,咱们一步步来修正:
1. HTML 类名语法错误
你在HTML的class属性里写了.lgi-grouping-responsive,但这里的前缀点是CSS/jQuery选择器的标识,不是类名本身!实际元素的类名应该是lgi-grouping-responsive,不带前面的点。这直接导致你的jQuery选择器$('.lgi-grouping-responsive')找不到任何元素,自然无法计算高度。
修正后的HTML:
<div class="lgi-grouping-responsive">Continue running background apps when Google Chrome is closed </div> <div class="lgi-grouping-responsive">Continue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closed</div> <div class="lgi-grouping-responsive">Continue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closed </div> <div class="lgi-grouping-responsive">Continue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closed </div>
2. JavaScript 逻辑遗漏与初始值优化
你的代码只完成了计算最大高度的步骤,但没有把这个高度值应用到所有滑块上;另外把maximum初始化为null存在潜在风险(比如第一个元素高度为0时,0 > null的逻辑会出问题),建议初始化为0更稳妥。
修正后的完整JS代码(还要确保在DOM加载完成后执行):
$(document).ready(function() { var maximum = 0; $('.lgi-grouping-responsive').each(function() { var value = parseFloat($(this).height()); maximum = value > maximum ? value : maximum; }); // 关键:把计算出的最大高度应用到所有滑块 $('.lgi-grouping-responsive').height(maximum); });
验证效果
做完这两处修改后,页面加载时会自动遍历所有滑块,计算出最高高度,再把这个高度统一设置给每个滑块,就能实现你想要的统一高度效果了。
内容的提问来源于stack exchange,提问作者jinfy
相关产品推荐
相关产品推荐

