Question

我想在主页和2个不同的对话框中使用一组100个列表项。我想，编写相同的代码集将是愚蠢的。那我怎么能在网页的3个不同的地方使用同一套呢

Answer 1

我会使用jQuery（或其他一些客户端库）来克隆项目，并将它们附加到每个<select>标记。如果您需要帮助，请告诉我。

Answer 2

您可以使用此代码段来克隆HTML，

  <script>
      (function(){
        $(document).ready(function(){

            $("#listA").clone().appendTo("#dialogueBox1");
            $("#listA").clone().appendTo("#dialogueBox2");

         })
       })();
   </script>

其中listA是“ul”或“ol”元素的id。

Answer 3

如果你想要一个纯HTML5解决方案，这可能会很有趣......使用datalist元素 - 对此的支持（目前）将会非常有限：

https://developer.mozilla.org/en-US/docs/HTML/Element/datalist

（来自上面的链接）

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

<input class="one" list="browsers" />
<input class="two" list="browsers" />
<input class="three" list="browsers" />

Answer 4

我会将列表存储在json文件中：list.json

{
  list: [element0, element1, ..., element99]
}

然后使用jQuery通过ajax检索元素，例如：

/**
 * Replaces the element's content with the list of items.
 */
function setList(element) {
  $.getJson(listJsonURL, function (data) {
    var list = "<ul>";
    for (var i = 0, len = data.list.length; i<len; i++) {
      list += "\n  <li>" + data.list[i] + "</li>";
    }
    list += "\n</ul>";
    $(element).html(list);
  });
}

警告：未经测试的代码。

可重用性：如何在网页中的不同位置使用相同的列表项

4 个答案: