如何在jQuery用户界面中为可调整大小的元素设置差异参数

Question

我使用可拖动和可调整大小的元素，页面上有两种类型的框，小的没有图像，大的有图像。

对于这两个元素，我在框上有可调整大小的文本，当用户开始调整元素的大小时，使用文本更改，对于大框，它是正常工作的，对于小no，我创建了func。

我喜欢这里的问题：

 $('.box').resizable({
          minWidth: 50,
          minHeight: 44,
          maxWidth: 205,
          maxHeight: 87,
          resize: function(event, ui) {
            var size = ui.size;
            $(this).children().css('font-size', (size.width * size.height) / 580 + 'px');
            $(this).css('font-size', (size.width * size.height) / 580 + 'px');
          }
        });

对于小盒子，我想设置这个参数：

$('.box').resizable({
          minWidth: 20,
          minHeight: 24,
          maxWidth: 100,
          maxHeight: 87,
          resize: function(event, ui) {
            var size = ui.size;
            $(this).children().css('font-size', (size.width * size.height) / 580 + 'px');
            $(this).css('font-size', (size.width * size.height) / 580 + 'px');
          }
        });

如果我为小元素设置了与正常工作不同的参数。如何为对象设置不同的参数。另外，我在视图中动态地创建了对象。

我的代码- jsFiddle

Answer 1

我在这里做过你的例子：https://jsfiddle.net/Twisty/czhLjtud/12/

JavaScript

$(function() {
  function calcFont(s) {
    var result = Math.round((s.width * s.height) / 580);
    return result + "px";
  }

  $('.lpms3-box').draggable();

  $('.lpms3-box > .box').resizable({
    minWidth: 50,
    minHeight: 44,
    maxWidth: 205,
    maxHeight: 87,
    resize: function(event, ui) {
      var newFont = calcFont(ui.size);
      console.log(ui.size.width, ui.size.height, (ui.size.width * ui.size.height) / 580, "Set new font: " + newFont);
      $(this).css('font-size', newFont);
    }
  });
});

这似乎适用于这两个盒子。还不清楚为什么它不适合你。

对于数学，最好在附加任何字符串项之前将所有部件包装在(和)中。例如：

(size.width * size.height) / 580 + 'px'

这段代码有点模棱两可，+可能被解读为错误的运算符。我建议这样做：

((size.width * size.height) / 580) + 'px'

这样，代码就知道了正确的操作，并将使用+作为连接运算符，而不是加法运算符。