javascript - JQuery - 使用 slider 调整多个不同的 div 宽度

Question

过去几周我一直在研究自定义表格控件，现在已经集成了 JQuery Slider 功能来增加/减少行的大小。

我尝试过的:

• 我尝试使用 $('.divClass').css({ 'transform': 'scale()' })，但缩放会增加两边的大小水平面和垂直面的两侧，从而溢出到 table 后面。

• 我想过将它们的宽度值分配给一个变量，然后在 slider 的 ui.value 上更改该变量，但是当我尝试它时，它的工作原理与与我希望它的工作方式相反。

• 在那次失败之后，我又把这件事搞得一团糟:

  $("#slider").slider({
      value: 50,
      min: 50,
      max: 100,
      step: 1,
      slide: function (event, ui) {
  
          $('.divBodyView').find('.divRow').css('height', ui.value)
          $('.divBodyView').find('.divRow').find('.divCell').css('height', ui.value / 1.25)
          $('.divBodyView').css('font-size', ui.value / 3)
  
          $('.divBodyView').find('.divRow').find('.divCellPicture').css('height', ui.value / 1.5)
          $('.divBodyView').find('.divRow').find('.divCellPicture').css('padding-top', ui.value / 10)
  
      }
  });
  

现在这个工作有点好了。从某种意义上说。然而，我在这张表中有多个“列”，而且每列都是自定义宽度，这让我很苦恼。

即:[PICTURE: 50px]---[ID: 100px]---[DESCRIPTION: 250px]---[ASSIGNED TO: 125px]

现在，我将如何着手更改所有这些基于它们当前持有的值的值？基本上，如果我将行数增加 20 像素，我将得到“图片:70 像素，ID:120 像素，描述:270 像素，分配给:145 像素”。

提前感谢您的帮助。

Answer 1

你可以尝试使用这个只扩展第一列:

 $('.divBodyView').find('.divRow').find('.divCell:first').css('width', ui.value)

否则你可以将每一列与一个比率变量相乘