开发者

Have 3 tabs where the data is coming from XML and each part has different Data - using jQuery

So I need to have 3 divs. when I click on each link the appropriate div will be shown with the info coming from the XML file.

Here is the XML FILE:

<dynamic_div>
<div set="1">
    <p>Lorem ipsum dolor sit amet, consecter adipiscing elit. Ut ac ipsum et metus cursus feugiat nec at purus. In imperdiet lectus eu metus mollis nec mollis sem tincidunt.</p>
    <p>Vestibulum lortis est eu ante bendum convallis ornare dolor consectetur. Proin gravida turpis non odio lacinia sit amet elementum justo dapibus.</p>
    <p>Duis eget lacus id lectus adipiscing bibendum at ut dolor. Sed laoreet leo id nunc elementum a rhoncus leo bibendum.</p>
</div>

<div set="2">
    <image>
        <name>Image</name>
        <source>/img/jpeg.jpg</source>
        <alt>some alt info</alt>
    </image>
</div>
<div set="3">
    <links>
        <title>Web Links</title>
        <link>
            <name>Site 1</name>
            <url>http://www.w3.org</url>
        </link>
        <link>
            <name>Site 2</name>
            <url>http://www.site.com</url>
        </link>
        <link>
            <name>Site 3</name>
            <url>http://www.site.net</url>
        </link>
        <link>
            <name>Site 4</name>
            <url>http://www.site.com</url>
        </link>
        <link>
            <name>Site 5</name>
            <url>http://www.site.com</url>
        </link>
    </links>
</div>
</dynamic_div>

so currently this is what I have for jQuery. Any ideas on how this could be simplified to do what I need it to do?

$(function(){


$.ajax({
    type: "GET",
    url: "dev_test.xml",
    dataType: "xml",
    success: function(xml) {
        $(xml).find('content').each(function() {
            var set = $(this).attr('set');

            if(set == 1)
            {
                var words = $(this).find('p').text();
                $('<p>').html(words).appendTo('#set_1');

            }
            if(set == 2)
            {
                var name    = $(this).find('name').text();
                var img     = $(this).find('source').text();
                var alt     = $(this).find('alt').text();
                $('<img />').attr('src',img).attr('alt',alt).attr('title',name).appendTo('#set_2');
                //('开发者_开发技巧<img />').data(words).appendTo('#set_2');

            }
            if(set == 3)
            {
                var words = $(this).find('p').text();
                $('<p>').html(words).appendTo('#set_3');

            }
        });
    }
});
 });


I know you are looking for more than this but a switch case would help to begin with:

switch(set)
        {
         case 1:
            var words = $(this).find('p').text();
            $('<p>').html(words).appendTo('#set_1');
            break;
        case 2:
            var name    = $(this).find('name').text();
            var img     = $(this).find('source').text();
            var alt     = $(this).find('alt').text();
            $('<img />').attr('src',img).attr('alt',alt).attr('title',name).appendTo('#set_2');
            //('<img />').data(words).appendTo('#set_2');
           break;
        case 3:
            var words = $(this).find('p').text();
            $('<p>').html(words).appendTo('#set_3');
            break;
        }

And jquery parseXML may help with the rest: http://api.jquery.com/jQuery.parseXML/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜