Question

您好我会尽可能地教育！

所以我有一个包含在ul。中的li列表。

<ul class="ulclass">
   <li class="liclass">
       <div class="button">expand</div>
       <img src="600px_wide.jpg"/>
   </li>
   <li class="liclass">
       <div class="button">expand</div>
       <img src="800px_wide.jpg"/>
   </li>
   <li class="liclass">
       <div class="button">expand</div>
       <img src="300px_wide.jpg"/>
   </li>
</ul>

在每个 li 元素中都有一个按钮，点击后 li 会扩展到嵌套图片的宽度。因此，如果图像宽度为800px，则 li 会相应扩展。

现在情况是我想动态计算所有li的总宽度。现在我正在使用类似的东西：

$(li).each(function() {
totalWidth += parseInt($(this).width());
});

将获得页面加载时所有li的宽度。但扩展后说一个宽度值不会改变。 当我扩展/收缩li时，我想要改变总宽度可能是一个事件监听器？在涉及回调等方面，我真的很新。所以至少我想要一些指导。也许它甚至不可能......

我感谢所有帮助！谢谢

Answer 1

James的答案很好，但根据读取值的频率/位数，您可能更愿意在要求值时调用该代码。因此，someDependentFunction(totalWidth)取代someDependentFunction(totalWidth())而不是totalWidth，其中function totalWidth = new function() { var total = 0; $(li).each(function() { total += parseInt($(this).width()); }); return total; }是：

{{1}}

正如詹姆斯所说，如果你担心调用$（li）的性能，那么如果它与YUI相当，它会在第一次调用后缓存结果，所以它实际上应该不是很多。我不是一个真正的jQuery专业人士，所以情况可能并非如此。

Answer 2

您可以简单地调用此代码，以便在每次展开或收缩li时计算宽度。除非你有大量的li元素，否则再次添加它们的性能不应该太差。

获取（计算）具有动态宽度的多个元素的总宽度

2 个答案: