javascript - 在加载和调整大小时从 jQuery UI 的可调整大小的 div 获取百分比宽度

Question

所以我将这两个 div 放在一起。两个 div 都可以使用 jQuery UI 调整大小。

在调整 div 大小时，我抓取宽度，将其转换为百分比并将其输出到相应的输入，但发生了一些奇怪的事情。

HTML:

<div id="parent">
   <div id="div1"> My Data1
     <input type="text" class="div1">
   </div> 
   <div id="div2"> My Data2
     <input type="text" class="div2">
   </div> 
</div>

Javascript:

$("#div1").resizable();
$('#div1').resize(function(){
   $('#div2').width($("#parent").width()-$("#div1").width()); 
});
$(window).resize(function(){

   var div1width = $(".div1").width() / $('.div1').parent().width() * 100;
   // Paste percentage into the inputs
   $('.div1').val(div1width);

   var div2width = $(".div2").width() / $('.div2').parent().width() * 100;
   // Paste percentage into the inputs
   $('.div2').val(div2width);
});

CSS:

#parent{
    position:absolute;
    height:100%;
    margin:0;
    padding:0;
    width:100%;
}
#div1{
    position:relative;
    float:left;
    height:100%;
    width:50%;
    background-color:#A2A;
}
#div2{
    position:relative;
    float:left;
    height:100%;
    width:50%;
    background-color:#BBB;
}
.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%;
    background: black;
}

fiddle :https://jsfiddle.net/uvcxfmfy/1/

发生的情况是，当我将例如 div1 变小时，宽度百分比会上升甚至超过 800%。当我把它加宽时，宽度百分比停在 20%。所以出了点问题，但我找不到它在哪里。

我正在努力实现的目标。

在页面加载时，两个 div 应该有 50% 的宽度。当我将 div1 变小时，它应该一直到 0%；当我将它变大时，它应该一直到 100%。

这意味着如果 div1 设置为 25%，则 div2 将有 75%当 div1 设置为 58% 时，div2 为 42%。

感谢大家的帮助。

Answer 1

希望对您有所帮助。你应该使用这个数学来得到百分比:

Math.round(( docWidth - elemWidth ) / docWidth * 100)

---

我只是订购您的代码并更改计算行，看看这个示例:

$("#div1").resizable();

$('#div1').resize(function(){
   $('#div2').width($("#parent").width()-$("#div1").width()); 
});

$(window).resize(function(){
    elementResize()
});

$(document).ready(function(){
    elementResize()
});

function elementResize(){
   $('#div2').width($("#parent").width()-$("#div1").width()); 
   $('#div1').height($("#parent").height()); 

   var parentwidth = $("#parent").width(),
       div1width = $("#div1").width(),
       div2width = $("#div2").width(),
       div1percentage = Math.round((div1width / parentwidth) * 100),
       div2percentage = Math.round((div2width / parentwidth) * 100);

   $('.div1').val(div1percentage);
   $('.div2').val(div2percentage);
}

Fiddle demo