0

我有一个简单的应用程序，可以搜索 Google Books API 并返回公共领域书籍的列表。然后用户可以打开免费书籍并阅读它。

问题是，如果您搜索不止一次，它会将下一个搜索结果附加到页面上。

有没有办法让第二次搜索的结果“替换”第一个结果？

小提琴：http: //jsbin.com/welcome/52020

       <form name="inputForm"
                  onsubmit="beginSearch(this.query.value); return false;"
                  method="get">
                <input type="text" size="30" name="query" value="Romeo and Juliet" id="textfield"/>
                <input type="submit">
        </form>

        <div id="lister">
        </div>


//for list
function beginSearch(query) {

    var script = document.createElement("script");

    script.src = 'https://www.googleapis.com/books/v1/volumes?q='
            + encodeURIComponent(query) + '&filter=free-ebooks'
            + '&callback=handleResultsList';
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
}

//structure results
    function handleResultsList(response) {

    for (var i = 0; i < response.items.length; i++) {
        var item = response.items[i];
        var title = item.volumeInfo.title;
        var thumb = item.volumeInfo.imageLinks.thumbnail;
        link = item.accessInfo.webReaderLink + '&amp;output=embed'; // cache value
        var img = $("<img/>").attr("src", thumb);
        var booklink = "booklink";
        var bookframe = "bookframe";

            $("<a/>").attr({class: booklink, href: link, title: title}).append(img).appendTo("#lister");

    }

}
4

2 回答 2

1

由于您使用的是 jQuery，它应该像这样简单：

    //structure results
    function handleResultsList(response) {

    $('#lister').find('a').remove(); // Remove all existing links before adding new

    for (var i = 0; i < response.items.length; i++) {
        var item = response.items[i];
        var title = item.volumeInfo.title;
        var thumb = item.volumeInfo.imageLinks.thumbnail;
        link = item.accessInfo.webReaderLink + '&amp;output=embed'; // cache value
        var img = $("<img/>").attr("src", thumb);
        var booklink = "booklink";
        var bookframe = "bookframe";

            $("<a/>").attr({class: booklink, href: link, title: title}).append(img).appendTo("#lister");

    }
}
于 2012-11-21T20:49:07.233 回答
0

将 onsubmit 更改为

$("#lister").html(""); beginSearch(this.query.value); return false;
于 2012-11-21T20:50:15.813 回答