html - 使用 jQuery 显示 XML 文件中的数据

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/>");
            });

        });

    });

});

这应该可以满足您的要求。