我的情况是这样的:
我们有两个类似的弹出窗口,这样的弹出窗口由工厂生成(在Javascript中),以便它们共享相同的公共事件&功能。其中之一是名为resizeFormRowService
的自定义调整大小函数。当浏览器窗口触发resize
事件时,它将被调用。
由于弹出窗口处于重复
之类的结构中<div class="row">
<div> //label </div>
<div> //data </div>
</div>
resizeFormRowService
首先使用类row
获取父div的宽度,然后将其第一个div子(标签)设置为固定宽度(如140px),并设置为第二个div的宽度为&#34;父母 - 第一个孩子&#34;。所有这些都是由JQuery完成的(如下所示)
我发现Chrome中的一个弹出窗口有一个奇怪的行为(我正在比较两个类似的弹出窗口)。
第二个子div(即数据)的计算宽度比其他弹出对应字段多5px。所以我在resizeFormRowService
中记录了一些内容,以追踪正在发生的事情。
StandardTemplatePopup.prototype.resizeFormRowService = function () {
var self = this;
var $popUp = self.getPopup();
...
var $rows = $popUp.find('.row');
$rows.each(function () {
var $this = $(this);
var $firstDiv = $this.find('div:first');
var $secondDiv = $this.find('div:eq(1)');
var labelColWidth = self.options('labelColWidth');
// labelColWidth is something we can config, so both popup firstDiv's width is the same
// so I think the problem must be in $this.width()
$firstDiv.width(labelColWidth);
//Add by me, want to see which row is this
console.log($this);
//Add by me, see this row's width
console.log($this.width());
var width = $this.width() - $firstDiv.outerWidth() - 0.5;
$secondDiv.width(width);
});
...
};
&#13;
在两个弹出窗口中运行此操作,一个日志270px
,而另一个日志265px
!所以我试着看看它们是哪一行,此时我想可能在第一个弹出窗口中有一些脚本改变了行的边距/填充,从而改变了它的宽度,但令人惊讶的是它不是情况下
这是第一个弹出窗口
这是第二个弹出窗口
如图所示,第二个子div的计算宽度相差5px,但父行的宽度完全相同,这与我在{ {1}}!
所以我的问题是:是否有任何已知的JQuery width()问题导致我的问题?如果不是,那么任何指出潜在原因的建议都会受到赞赏。
编辑:
我希望这可以通过试验和暗示暗示某人,我的一个队友。错误,在第一个弹出窗口的末尾添加一个空div
resizeFormRowService
然后一切都很顺利......两个弹出窗口都会正确调整大小。
PS1:结果较小:265px是正确的预期结果
PS2:图像中的高度差异是由于第二个子div的错误计算宽度导致内容太宽而无法在一行中显示,因此高度自动增加
答案 0 :(得分:0)
我只想把它放在一个答案中,因为评论不是很有见地。
对我而言,您的计算似乎太快并且不能保持任何预设值。有点像说,CSS过渡会100%肯定会让你搞砸了。我个人会更喜欢这样编码(我自己是一名前锋)
$rows.each(function () {
var $this= $(this);
var $firstDiv = $('div:first', $this);
var $secondDiv = $('div:eq(1)', $this);
var labelColWidth = self.options('labelColWidth');
// labelColWidth is something we can config, so both popup firstDiv's width is the same
// so I think the problem must be in $this.width()
$firstDiv.width(labelColWidth);
//Add by me, want to see which row is this
console.log($this);
//Add by me, see this row's width
console.log($this.width());
//why recalculate the $firstDiv.width when you have labelColWidth?
//try to avoid simple names like "width" for prevention of double naming
var newWidth = $this.width() - labelColWidth - 0.5;
$secondDiv.width(newWidth);
});
- 我应该提一下,div:first
和div:eq(1)
之类的选择器在插入: after
或: before
等内容时往往会中断。我建议你改用类。