如何在jQuery UI中为可调整大小的元素设置diffedert参数

Question

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

对于这2个元素，我在框上有可调整大小的文本，当用户开始调整元素的大小时，我会创建函数，其中d个文本正在更改，对于大框，它正常工作，对于小框。

我喜欢这里的问题：

$('.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'

通过这种方式，代码知道正确的操作，并将使用+作为concat运算符，而不是加法运算符。