javascript - 如何设置多个Jquery-UI可调整大小？

Question

我使用 Jquery-UI 调整不同 div 的大小，但它们具有不同的“类型”和不同的参数(minWidth、minHeight、aspectratio ...)。这段代码可以工作，但最终的代码可能会有 20 个“类型”。

如何优化这段代码？

$(".child").resizable({
    containment: "parent",
    resize: function( event,ui ){
        if(ui.element.attr('data-type')=="type-b"){
            // specific code to type-b
        }
        if($(this).attr('data-type')=="type-c"){
            // specific code to type-c
        }
    },
    stop: function (event,ui) {
        $.ajax({
            url: "save.php",
            type: "POST",
            data: {id: ui.element.attr('id')},
            success: function (child_id) {
                var parent_id = $('#main').attr('id'),
                    full_id =(parent_id+"_"+child_id),
                    child_width = ui.size.width,
                    child_height = ui.size.height,
                    t=JSON.parse(sessionStorage.getItem(full_id));

                t.width=child_width;t.height=child_height;
                sessionStorage.setItem(full_id,JSON.stringify(t));
            }
        });
        if(ui.element.attr('data-type')=="type-a"){
            // specific code to type-a
        }
        if($(this).attr('data-type')=="type-b"){
            // specific code to type-b
        }
    }
});

$(".child.type-a").resizable({
    minWidth: 200,
    minHeight: 50,
    handles : "e,w"
}),$(".child.type-b").resizable({
    minWidth: 160,
    minHeight: 110,
    handles : "e,w"
}),$(".child.type-c").resizable({
    minWidth: 300,
    minHeight: 185,
    aspectRatio: 1.618/1
});

Answer 1

如果每一个都是独一无二的，那么你就不会偏离你所拥有的太远。一种选择是将所有变量存储在一个对象中并迭代每个变量以设置选项。示例:https://jsfiddle.net/hovqphko/

$(function() {
  var resOptions = {
    "type-a": {
      minWidth: 200,
      minHeight: 50,
      handles: "e,w"
    },
    "type-b": {
      minWidth: 160,
      minHeight: 110,
      handles: "e,w"
    },
    "type-c": {
      minWidth: 300,
      minHeight: 185,
      aspectRatio: 1.618 / 1
    }
  };

  $(".child").resizable({
    containment: "parent"
  });

  $.each(resOptions, function(k, v) {
    console.log("Setting", k, "to", v);
    $("." + k).resizable("option", v);
  });
});