1

我在使用 jQuery 和 Visual Studio 编写所有内容的 .NET 4.0 环境中，但是除了如何填充 XML 数据之外，这些事实都不应该那么重要。

我从这个脚本开始，里面有很多标记。我的任务是从脚本中取出标记并将 XML 数据填充到标记中适当的位置。我试图通过这样做使表示层和行为层尽可能分开。

function addIcons(IconType) {
    var li ="";
    var onclickMethod="";
    for (var item in hashObject) {
        var thumbNail = item.split("_");
        if (thumbNail[0] == IconType +"ThumbNail") {
            var imagePath = baseUrlThumbNailImages + hashObject[item];

            li = li + "<li  onclick=IconClick('" + IconType +"',"+ thumbNail[1] + ")><img src=\"" + imagePath + "\" alt=\"" + IconType + " shape\"></li>\n";
        }
    }
    $("#" + IconType + "ThumbNailShapes").append(li);
}

这是我想要作为最终结果的示例标记：

<ul>
  <li onclick="IconClick('Item',1)">
    <img src="/images/image_1.png" alt="Item shape" />
  </li>
  <li onclick="IconClick('Item',2)">
    <img src="/images/image_2.png" alt="Item shape" />
  </li>
  <li onclick="IconClick('Item',3)">
    <img src="/images/image_3.png" alt="Item shape" />
  </li>
</ul>

虽然我知道我需要删除开头的代码行li = li + ...，但我对 OOP 还不够熟悉，无法理解如何编写 for 循环来填充标记。

所以有两个因素我不确定如何编码：

  1. 空白标记 - 标记是否需要变量来填充它或者 javascript 是否应该自动执行此操作？
  2. javascript - 我不知道如何重新编码 javascript 以查找每个列表项和图像标记以填充各种数据。

我是否需要像这样将标记设为空白，所有变量数据都不存在？

<ul id="IconThumbnailShapes">
  <li onclick="">
    <img src="" alt="shape" />
  </li>
  <li onclick="">
    <img src="" alt="shape" />
  </li>
  <li onclick="">
    <img src="" alt="shape" />
  </li>
</ul>

我感谢您的洞察力和帮助。

4

1 回答 1

1

我会这样做。

假设我们有一个容器 DIV#foo，所有这些代码都必须驻留在其中。

<div id="foo"></div>

然后我们这样做：

$(function() {
   // DOM ready

   $('#foo').on('click', '#IconThumbnailShapes li', function() {
       // Do whatever you have to do with icon
       // Second argument there '#IconThu... li' means the event will be trigerred 
       // as soon as you add your icons, but they don't have to be there 
       // right now.
   });

   function addIcons(iconType) {
       var s = '<ul id="IconThumbnailShapes">'
       var l = '<li><img src="$SRC" alt="$ICON shape" /></li>'
       var data = [{...}, {...}, {...}];
       var len = data.length;

       var datum;

       for (var i = len; i; i--) {
          datum = data[len - i];
          s += l.replace('$SRC', datum.src).replace('$ICON', iconType);
       }

       s += '</ul>';

       $('#foo').html(s);       
   }

});

所以，我们这样做，因为我们不想在 for 循环中触发 jQuery 的东西。这会扼杀性能。相反，我们为单击容器 DIV#foo 设置了一个延迟的偶数处理程序，我们将整堆标记作为字符串推入容器中。

于 2013-01-03T01:41:54.950 回答