Question

我正在从xml文件构建图库。这是我正在使用的xml：

<?xmlversion="1.0"encoding="utf-8"?>

<sections>

    <section id="section-1">

            <photo imageurl="images/gallery-images/1.jpg">
                <title>Fusce dapibus, tellus ac cursus commodo</title>
                <description type="wide">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.</description>
            </photo>

    </section>


    <section id="section-2">

我用来获取该文件内容的jquery：

$.get('images/gallery-images/gallery-images.xml', function(parseXML){

    $(parseXML).find('section').each(function(){

        var $section = $(this);
        var sectID = $section.attr('id');
        var photo = $section.find('photo');
            var imageurl = photo.attr('imageurl');
            var title = photo.find('title').text();
            var description = photo.find('description').text();
                var kind = photo.find('description').attr('type');  

        var html = '<div class="gallery-section" id="' + sectID + '" >';
        html += '<div class="photo">';
        html += '<img src="' + imageurl +'" class="gallery-photo" />';
        html += '<div class="photo-info ' + kind + '"><h1>' + title + '</h1>';
        html += '<p>' + description + '</p></div>';
        html += '</div></div>';

        $('#photo-viewer-inner').append($(html));
        $('#loading').delay(600).fadeOut(600);
    });

});

所以，我需要做的是为每个“照片块”创建部分，然后在各个div中生成带有标题和描述的图像。这对我来说非常基本，但这是我第一次涉足xml，所以我有点陷入黑暗中。如果我需要提供更多信息，请告诉我。谢谢大家！

Answer 1

在您的示例中，您需要再次遍历照片集并为这些照片构建标记：

$(parseXML).find('section').each(function(){

    var $section = $(this),
        photos = $section.find('photo'),
        photoContainer = $('<div></div>', {
            id : $section.attr('id'),
            'class' : 'gallery-section'
        });

    photos.each(function(photo){

        var photo = $(this),
            imageurl = photo.attr('imageurl'),
            title = photo.find('title').text(),
            description = photo.find('description').text(),
            kind = photo.find('description').attr('type');

        var photoWrapper = $('<div class="photo"></div>'),
            imageElem = $('<img/>', {
                src : imageurl,
                'class' : 'gallery-photo' 
            }),
            photoInfo = $('<div></div>', {
                'class' : 'photo-info ' + kind
            }),
            header = $('<h1></h1>', {
                text: title
            }),
            photoDescription = $('<p></p>', {
                text: description 
            });  

        photoInfo.append(header);    

        photoWrapper
            .append(imageElem)    
            .append(photoInfo);

        photoContainer.append(photoWrapper);     

    });  

    $('#photo-viewer-inner').append(photoContainer);

    $('#loading').delay(600).fadeOut(600);
});

注意：我没有测试过这个。如果我错过了什么，我会很乐意提供帮助。

正如您可能已经知道的那样，构建大部分HTML然后用数据填充它是令人厌倦的，通常效率低下并且是维护噩梦。如果可以的话，使用模板系统会更容易。这使您可以将HTML结构与逻辑分开。

虽然有许多库可用，my current favourite is Underscore（设计用于jQuery的库）

但是，如果您想坚持使用jQuery，那么它也会is a template plugin，但它已经停止使用。

使用ajax，xml和查询生成图库

1 个答案: