Question

我有以下XML文件，其中包含A - B - C - D等格式的字母和单词定义......

<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>

如果我点击B，则应在框中加载 bat 和 book 。如果我点击 book ，它应该在右侧区域显示相关的定义。如何使用jQuery创建此功能？

Answer 1

如果你的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/>");
            });

        });

    });

});

这应该做你要问的事。

Answer 2

如果要从字符串加载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列表，然后在用户单击字母时动态加载单词。因此，只有相关和必要的词语＆amp;定义按需转移。您也可以对此进行缓存，以避免对相同定义的重复请求。

Answer 3

jquery能够使用XML。您需要使用each函数来迭代XML并从中创建页面结构。

使用jQuery从XML文件显示数据

3 个答案: