2

我有一个小文档库，我无法让下面的代码正确显示结果（在学习 jquery 的过程中）。它读取文件很好，告诉我有 3 个结果，例如，如果我点击 B 但只显示最后一个结果。下面的页面被调用到 jquery_version_using 所在的另一个页面。它把我自己和一位同事逼到了墙角，所以我求助于更广泛的社区，看看你们是否有任何想法。它自己的 xml 文件没什么特别的。提前感谢您提供的任何帮助。

<script type="text/javascript" src="js/tablesorter.js"></script>

<script language="javascript">          

        $('button').click(function() {
        // alert($(this).val());
        var azRef = $(this).val();
            $.ajax ({
                type: "GET",
                url: "data/alldata.xml",
                dataType: "xml",
                cache: false,
                success: function(response) {

                $('#result').html('');  

                var row;
                var i = 0;

                $(response).find('indices').children().each(function() {

                var azIndex = '';
                var exp = '';
                var searchAZ = '';
                var pub = '';

                var azdoc = $(this);
                var title = azdoc.find('title').text();     
                var ref = $(this).find('reference').attr("ref");
                var ref_link = $(this).find('reference').attr("ref_link");
                var docLink = '<a href="' + ref_link + '" > ' + ref + ' </a>';              
                var type = azdoc.find('type').text();
                var status = azdoc.find('status').text();
                azIndex = azdoc.find('azindex').text();

                exp = new RegExp(azRef,"gi");

                searchAZ = azIndex.match(exp);

                if  (searchAZ != null) {

                if ((i % 2) == 0) { row = 'even'; }
                else { row = 'odd'; }               

                i++;                

                pub += '<tr class="row ' + row + '">' + '\n';
                pub += '<td valign="top" class="col1">' + title + '</td>' + '\n';
                pub += '<td valign="top" class="col2">' + docLink + '</td>' + '\n';
                pub += '<td valign="top" class="col3">' + status + '</td>' + '\n';              
                pub += '</tr>' + '\n';

                showResult ( pub );

                 }      

                function showResult (resultSet) {


                pub = '<div class="message">There are ' + i + ' results!</div>';
                pub += '<table id="grid" border="0">' + '\n';
                pub += '<thead><tr>' + '\n';
                pub += '<th class="col1">Title</th>' + '\n';
                pub += '<th class="col2">Link</th>' + '\n';
                pub += '<th class="col3">Status</th>' + '\n';
                pub += '</tr></thead>' + '\n';
                pub += '<tbody>' + '\n';                

                pub += resultSet;

                pub += '</tbody>' + '\n';
                pub += '</table>' + '\n';

                $('#result').html(pub);

                $('#grid').tablesorter(); 

                }


});
}
});
});


</script>

<table width="100%">
    <tr>
        <td><button value="9" >0-9</button> |</td>
        <td><button value="A" >A </button> |</td>
        <td><button value="B" >B </button> |</td>
        <td><a href="#">C</a> |</td>
        <td><a href="#">D</a> |</td>
        <td><a href="#">E</a> |</td>
        <td><a href="#">F</a> |</td>
        <td><a href="#">G</a> |</td>
        <td><a href="#">H</a> |</td>
        <td><a href="#">I</a> |</td>
        <td><a href="#">J</a> |</td>
        <td><a href="#">K</a> |</td>
        <td><a href="#">L</a> |</td>
        <td><a href="#">M</a> |</td>
        <td><a href="#">N</a> |</td>
        <td><a href="#">O</a> |</td>
        <td><a href="#">P</a> |</td>
        <td><a href="#">Q</a> |</td>
        <td><a href="#">R</a> |</td>
        <td><a href="#">S</a> |</td>
        <td><a href="#">T</a> |</td>
        <td><a href="#">U</a> |</td>
        <td><a href="#">V</a> |</td>
        <td><a href="#">W</a> |</td>
        <td><a href="#">X</a> |</td>
        <td><a href="#">Y</a> |</td>
        <td><a href="#">Z</a></td>      
    </tr>
</table>
<hr>

<div id="result">&nbsp;</div>
4

1 回答 1

0

In showResults() you call this:

$('#result').html(pub);

Every time showResults() get's called, the contents of #result is overwritten. That's the reason you only see the last item.

You could try append() instead:

$('#result').append(pub);
于 2013-07-26T11:21:43.797 回答