javascript - 如何使用元素的实时宽度同时调整另一个div的大小？

Question

我有一个特殊的任务，我需要调整一个 div 的大小，同时调整另一个 div 的实时宽度，我想知道如何做到这一点，请参阅 Fiddle 例如:http://jsfiddle.net/Lindow/x8tdp0kg/14/ ，(单击文本 div 以显示 handle )。我尝试使用 width 但它不适用于我的代码。

Javascript:

$('#handles_manager').resizable({
  handles: {
    'e': '#egrip',
    'w': '#wgrip'
  }
});

function showHandles(e) {
    var width = $(this).width();
    var pos_left = $(this).position().left;
    var post_top = $(this).position().top;
    $('#handles_manager').css({'width':width, 'transform':'translate3d(' + pos_left + 'px, ' + post_top + 'px, 0px)', 'visibility':'visible'});

    var handles_width = $('#handles_manager').width(); // Get live width
    $(this).css({'width': handles_width + 'px !important'});

}

var elements = document.getElementsByClassName('element');
for(var i = 0; i < elements.length; i++) {
    var element= elements[i];
    element.addEventListener('click', showHandles);
}

HTML:

<div id="elements">
  <div class='element' style="transform: translate3d(0px, 0px ,0px)">
    <div class="inner-text">sss ss I'mfdgfdg fdgdfgfdgtryin sjdsaidj sdk dasd k sadopskaf kpsoadk ijfdk jod sadsassads</div>
  </div>

  <div class='element' style="transform: translate3d(0px, 100px ,0px)">
    <div class="inner-text">sss ss I'mfdgfdg fdgdfgfdgskaf kpsoadk ijfdk jod sadsassads</div>
  </div>
</div>

<div id="handles_manager">
  <div id="resize_content"></div>
  <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
  <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
</div>

我使用此方法是有原因的，这就是为什么我没有将句柄直接输入到 html 代码中。

有什么建议吗？

Answer 1

找到了解决方案，我只需使用 $('#...').resize(function(e) {} 即可进行实时更改。