Отображение данных из файла XML с использованием jQuery - PullRequest
Новая
       4

Отображение данных из файла XML с использованием jQuery

2 голосов
/ 05 августа 2011

У меня есть следующий XML-файл, содержащий определения букв и слов в этом формате. A - B - C - D - и т. Д. и книга в коробке.Если я нажму на book , в правой части отобразится соответствующее определение.Как я могу создать эту функциональность, используя jQuery?

Ответы [ 3 ]

3 голосов
/ 05 августа 2011

Если ваш HTML такой: 

<div class="search" data-letter="a">A</div>
<div class="search" data-letter="b">B</div>
<div class="search" data-letter="c">C</div>
<div class="search" data-letter="d">D</div>
<div id="results"></div>

Тогда javascript: 

$(function(){

    var xml_data;

    // Load the XML
    $.get("your_xml_file.xml", function(data){

        xml_data = $(data);

        // On click of search buttons
        $(".search").bind("click", function(){

            // Clear the results div
            $("#results").html("");

            // Get the desired letter
            var letter = $(this).data("letter");

            // Loop through each result which has name attribute beginning with letter
            xml_data.find("data[name^='"+letter+"']").each(function(k, v){

                // Append definition to results
                $("#results").append($(this).attr("definition") + "<br/>");
            });

        });

    });

});

Это должно сделать то, о чем вы спрашиваете.

2 голосов
/ 05 августа 2011

Если вы загружаете XML из строки: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        ul ul, span {
            display:none;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var xml = '<container><data name="apple" definition="A sweet fruit. bla bla bla"/><data name="bat" definition="bla bla bla"/><data name="book" definition="bla bla bla"/><data name="cat" definition="bla bla bla"/><data name="cup" definition="bla bla bla"/></container>';
            var xmlDoc = $.parseXML(xml);
            var $xml = $(xmlDoc).find('container');
            var letters = new Object();

            // loop through all the definitions
            $xml.children().each(function(k, v) {
                var letter = $(v).attr('name').charAt(0);

                // only add letters not already added
                if (!letters[letter]) {
                    $('#definitions')
                        .append('<li><a href="#" id="' + letter + '">' + letter + '</a><ul></ul></li>');
                    letters[letter] = 'f';
                }

                // append definitions
                $('#definitions a#' + letter + ' + ul').append('<li><a href="#">' + $(v).attr('name') + '</a><span> - ' + $(v).attr('definition') + '</span></li>');
            });

            // bind click events on the letters to show/hide the words
            $('#definitions li > a').click(function() {
                $(this).next('ul').toggle();
                return false;
            });

            // bind click events on the words to show/hide the definitions
            $('#definitions ul li a').click(function() {
                $(this).next('span').toggle();
                return false;
            });
        });
    </script>
</head>
<body>
    <h1>Defintions</h1>
    <ul id="definitions"></ul>
</body>
</html>

Или если вы загружаете через AJAX, замените JavaScript на: 

$(function() {
    var $xml;
    var letters = new Object();

    if ($xml == null) {
        $.ajax({
            url : 'definitions.xml',
            dataType : 'xml',
            success : function (xml) {
                $xml = $(xml).find('container');
                console.log($xml);
                $xml.children().each(function(k, v) {
                    var letter = $(v).attr('name').charAt(0).toUpperCase();

                    // only add letters not already added
                    if (!letters[letter]) {
                        $('#definitions')
                            .append('<li><a href="#" id="' + letter + '">' + letter + '</a><ul></ul></li>');
                        letters[letter] = '.'; // store this key in the map (no actual value)
                    }

                    // append definitions
                    $('#definitions a#' + letter + ' + ul').append('<li><a href="#">' + $(v).attr('name') + '</a><span> - ' + $(v).attr('definition') + '</span></li>');
                });

                // bind click events on the letters to show/hide the words
                $('#definitions li > a').click(function() {
                    $(this).next('ul').toggle();
                    return false;
                });

                // bind click events on the words to show/hide the definitions
                $('#definitions ul li a').click(function() {
                    $(this).next('span').toggle();
                    return false;
                });
            }
        });
    }
});

Обратите внимание, чтоне быть лучшим решением с большим XML-файлом;браузер должен будет сначала передать весь файл, прежде чем отобразить страницу.Поэтому вам может потребоваться найти альтернативное решение, например, создать список a-z на странице и затем динамически загружать слова, когда пользователь нажимает на букву.Поэтому только соответствующие и необходимые слова и определения передаются по запросу.Вы также можете кэшировать это, чтобы избежать дублирования запросов для тех же определений.

1 голос
/ 05 августа 2011

jquery способен использовать XML. Вам необходимо использовать функцию each для итерации по вашему XML и создания структуры страницы из этого.

...