如何在 jQuery UI 中為可調整大小的元素設置 diffedert 參數

Question

我使用可拖動和可調整大小的元素，我在頁面上有兩種類型的框，小的沒有圖像，大的有圖像。

對於這 2 個元素，我在盒子上有可調整大小的文本，當用戶開始調整元素的大小時，我創建了 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');
          }
        });

如果我為小元素設置不同的參數而不是正常工作。 我如何為對象設置不同的參數。 另外，我在視圖中動態創建了 object。

我的代碼 - 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'

這樣，代碼就知道正確的操作，並將使用+作為 concat 運算符而不是加法運算符。