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);
  });
});

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

1 个答案: