Question

我在个人项目中工作，我很难用jQuery生成正确的标记。

我有一个动作返回要在此json结构中显示的图像列表

[{
    "Id": imageid,
    "imagePath": path to image,
    "imageThumbnailPath": path of the thumbnail,
    "imageTitle": image title,
    "imageSubtitle": image subtitle,
    "CategoryId": id of the category
}]

所以我想以动态方式生成标记以显示不同的图像。我正在使用引导程序模板，这就是我必须生成的内容：

<div class="span3">
    <div class="picture">
        <a href="path to image" rel="image" title="image title">
            <img src="path to thumbnail" alt="" class="customgalleryclass"  />
        <div class="image-overlay-zoom"></div>
        </a>
    </div>
    <div class="item-description">
        <h5><a href="#">image title</a></h5>
        <p>image subtitle</p>
    </div>
</div>

我试图用jQuery append，wrapInner等来生成正确的标记。但是因为我不太了解它会产生一团糟。

谢谢！

Answer 1

你不会分享它产生混乱的代码。

如果您不知道该怎么做，请搜索“jquery template json”。这将是一个良好的开端。你可以找到数百种方法。

快速示例我将使用jquery和 http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js

感谢http://www.borismoore.com/2010/10/jquery-templates-is-now-official-jquery.html

您可以在http://jsfiddle.net/marathonman/EkVvS/

找到工作示例

<强> HTML

    <div id="myGallery"></div>

<强> TEMPLATE

    <script id="myGalleryTemplate" type="text/x-jquery-tmpl">
    <div class="span3">
        <div class="picture">
            <a href="${imagePath}" rel="image" title="${imageTitle}">
                <img src="${imageThumbnailPath}" alt="" class="customgalleryclass"  />
            <div class="image-overlay-zoom"></div>
            </a>
        </div>
        <div class="item-description">
            <h5><a href="#">${imageTitle}</a></h5>
            <p>${imageSubtitle}</p>
        </div>
    </div>
    </script>

<强> SCRIPT

    var images = [
    {
        "Id": "imageid",
        "imagePath": "path to image",
        "imageThumbnailPath": "path of the thumbnail",
        "imageTitle": "image title",
        "imageSubtitle": "image subtitle",
        "CategoryId": "id of the category"
    }
    ];

    $( "#myGalleryTemplate" ).tmpl(images).appendTo( "#myGallery" );

生成动态图库jquery

1 个答案: