0

假设您有一个页面，用户可以在其中每次单击按钮时创建一个新的、唯一的 div。div 的内容大多基于服务器端通用的单一模板，但由于用户可以创建其中的几个，因此结果 div 的内容 DOM id 必须为每个请求动态生成，以便能够之后通过 jQuery 分别选择每个单独的 div 及其内容（否则，由于这些 div 基于相同的模板，它们自然会始终具有相同的 DOM Id，因此无法使用 jQuery 单独选择它们）

假设您正在使用 javascript 和 jquery 构建 Windows 系统。在服务器端，您有一个代表“文件夹”窗口的模板；这个模板有自己的按钮、菜单等，它们都是带有 ID 的 dom 元素。

然后，用户在页面上应该能够打开几个“文件夹”窗口，每个窗口在创建时都分配了不同的 id，但内容是相同的，因为加载的模板对于所有这些窗户。也就是说，如果用户打开 3 个“文件夹”窗口，页面中加载的实际标记可能如下所示：

<div id="firstWindow">
    <div id="windowContainer">
        <div id="windowHead">
            stuff
        </div>
        <div id="windowBody">
            <div id="windowInfoButton">stuff</div>
            stuff
        </div>
    </div>
</div>
<div id="secondWindow">
    <div id="windowContainer">
        <div id="windowHead">
            stuff
        </div>
        <div id="windowBody">
            <div id="windowInfoButton">stuff</div>
            stuff
        </div>
    </div>
</div>
<div id="thirdWindow">
    <div id="windowContainer">
        <div id="windowHead">
            stuff
        </div>
        <div id="windowBody">
            <div id="windowInfoButton">stuff</div>
            stuff
        </div>
    </div>
</div>

如您所见，windowContainer、windowHead 等由于从同一模板中读取而被重复。就其本身而言，这已经很糟糕了，但此外，我需要能够使用 jQuery 选择每个 windowContainer 或 windowHead，以便在 firstWindow 中操作它们不会影响 secondWindow，因此只需将所有 id 切换到类不会这样做。

我可以考虑两种方法来解决这个问题：

1）由于我直接使用 PHP 作为模板语言，我可以很容易地附加一些生成随机 ID 或字符串的代码并替换每个 DOM，例如：

<div id="someFixedID" class="someClass">stuff</div>

对此：

<div id="<?=$someRandomStuff?>someFixedID" class="someClass">stuff</div>

问题是，如果模板有大约 20 或 30 个 DOM 元素，那会极大地污染它，我试图在模板中包含尽可能少的代码，以便能够快速迭代设计。

2) 使用 jQuery，可以通过 ajax 加载模板，循环遍历 div 中的每个元素，并在显示之前动态更改它们的 id。这将有助于保持模板干净，但我担心这种方法可能会在客户端增加不必要的开销，因为它可能必须循环遍历大约 20 或 30 个元素。

哪种方法在可维护性和性能方面更有意义？还有另一种我没有想到的方法吗？

4

2 回答 2

1

您可以在 Ajax 调用的 URL 中添加一个参数，以获取模板以使用您的客户端生成的密钥。

一个非常粗略（不安全）的草稿：

在服务器上（template.php）：

<div id='<?= $_GET["container_key"] ?>' class='main-container'>
  ....
</div>

你的ajax调用：

var containerKey = Math.random();
$.ajax("/template.php?container_key=" + containerKey, ....)

使用比Math.random()（如时间戳、向导等）更好的东西来防止冲突。

于 2012-05-05T02:09:20.240 回答
1

如果我理解您的问题，您需要DIV使用唯一 ID 动态创建一个。使用 jQuery添加DIV具有唯一IDs 的 s，然后在这些DIVs 中从服务器端加载内容。您需要将客户端ID的生成代码与服务器端模板名称/内容同步。

例如：

HTML：

<div id='container'></div>
<input type='button' name='create' value='create' id='create'>​

jQuery : 

$('#create').live( 'click', function(){   
    var num = $('div.mydiv').length;
    var html = '<div id="myid' + num + '" class="mydiv">My Content ' + num + '</div>';
    $('#container').append(html);       
});​

在这里试试

可能不是一个完美的解决方案，但希望它能给你一个方向。

于 2012-05-05T01:52:53.150 回答