如何改进使用 jquery 将 div 尺寸保存到 css 的系统

Question

警告：我不是一个解释事情的好人，我的英语不是很完美，而且我对 php、javascript 和 jquery 有点菜鸟。如果您认为自己可以处理，请继续阅读。

所以，我有一个小系统，您可以在其中将 div 添加到网站，拖动它们并缩放它们。使用 jquery 很容易。但是，我正在尝试将更改保存到 css 和 html 文件，因此下次打开页面时，它就像您编辑它一样。

它还没有准备好，但我知道可以做到。但是，在完成它之前，我想知道是否有人建议如何以任何方式使其更简单或更好。

我现在解释一下它是如何工作的：

用户添加几个 div、缩放和拖动它们。 （jQuery 用户界面）。当用户单击保存更改的按钮时，系统会检查主容器有多少子元素（所有用户创建的 div 都是主容器的子元素）。现在系统循环所有子元素并将它们的尺寸（width、height、left、right）放入这样的数组[0]="200,300,500,500"。循环完成后，系统将数组连接成一个字符串，其中不同的元素用分号分隔。

系统以$.ajax() 发布字符串并使用php文件读取它，这就是php文件中发生的情况：

1. php 将通过 post 得到的字符串解析成这样的数组

   [0]="200,300,500,500"
   

2. 现在它循环遍历数组的内容，将每个字符串解析为 4 个变量

   $width = 200;
   $height = 300;
   $left = 500;
   $top = 500;
   

3. 现在系统将这些值作为字符串放入另一个数组中，并将 css 代码添加到字符串中。所以这个新数组看起来像这样

   [0] = "#div0{width:200px;height:300px;left:500px;top:500px;}."
   

4. 数组完成后，系统会将其内爆成一个字符串，删除旧的customstyle.css 文件并将该字符串写入新的customstyle.css 文件。

这里没有包含自定义 html 文件的创建，但它只是通过检查由 post 数据组成的数组有多少个值，然后在每个 div 的 id 为“div”的 html 文件中创建等量的 div （数字）”。

当页面加载时，php 包含自定义的 css 和 html 文件。目标是拥有不需要 javascript 且 xhtml 有效且样式简单的索引页面，以及用于编辑且需要 javascript 的其他页面。

我认为这个系统太复杂了，有太多的数组等等。但我不知道如何使它更简单:)

我想在开始时使用 javascript 创建整个样式字符串并将其作为一个整体发布到 php，然后直接将其写入样式表。但它比现在大得多，发布它不会那么有效。 （没关系，因为我是唯一一个尝试该系统的人，但感觉不对：P）

Answer 1

保存按钮可以组装一个包含所有 div 集合的 json 对象。它比使用字符串提供了许多优点，并且可以很容易地被 php 读取。

在 php 方面，为自定义元素编写一个类。它将有助于提高可读性，并允许您以更合乎逻辑的方式组合数据。类可以这么简单

class CustomElement{
    public $height;
    public $width;
    public $leftPos;
    public $rightPos;
    private $elmentName;

    public function __construct($name){
       $this->elementName = $name
    }
}

现在，只要您想处理新的自定义元素，您都可以这样做

$curElement = new CustomElement("div2");
$curElement->height = 600;
$curElement->width = 800;
...

Answer 2

这听起来像是 cookie 的工作。基本上，您将维度状态保存到 cookie (here's a link to Quirksmode describing using cookies in Javascript)。在页面加载时，您尝试使用 javascript 从 cookie 中检索维度状态并将其应用于您的元素。您可以通过 html (css) 类使用 jQuery 过滤它们，因此这是一项简单的任务。

如果你做得对，用户不会注意到任何事情。