検索し、そのまま再び検索ボタンを押すと次の20件の商品を上に積み上げていく形で表示させたいのですがどのようにしたら出来ますか?
検索ボタンを押すと20件表示されます
**HTML** <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>jQuery</title> <link rel="stylesheet" href="../../common/css/reset.css"> <link rel="stylesheet" href="../../common/css/base.css"> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="wrap"> <div class="container"> <div class="header"> <p class="header__title">Search Books!</p> </div> <div class="search"> <div class="search__text"> <input type="text" id="js-search-word" class="search__text__input" placeholder="検索する"> </div> <button id="js-search-button" class="search__btn">検索する</button> </div> <ul class="lists"></ul> </div> </div> <script src="../../common/js/jquery.js"></script> <script> ここにjQueryが入る </script> </body> </html>
**jQuery** $(function(){ $('#js-search-button').on('click',function(){ var keyword = $('#js-search-word').val(); $.ajax({ url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522', type: 'GET', datatype: 'json', data: { // 「区分:サービス固有パラメーター」を確認して、必要な情報をdata内に入れましょう。 applicationId: '1019399324990976605', // (今回はこのIDを使用してください) booksGenreId: '001', keyword: keyword, hits: '20', }}).done(function(data){ if (data.count > 0){ $("ul").empty(); $.each(data.Items,function(i,item){ var list = $("<li class='lists__item'>" + "<div class='lists__item__inner'>" + "<a href='" + item.Item.itemUrl + "'class='lists__item__link' target='_blank'>" + "<img src='" + item.Item.mediumImageUrl + "' class='lists__item__img' alt>" + "<p class='lists__item__detail'>作品名: " + item.Item.title + '</p>' + "<p class='lists__item__detail'>作者 : " + item.Item.author + '</p>' + "<p class='lists__item__detail'>出版社: " + item.Item.publisherName + '</p>' + '</a>' + '</div>' + '</li>'); $('ul').prepend(list); }) } else { $('.lists').before('<div class="coment"></div>') coment = $('.coment'); coment.html('<p class="message">検索結果が見つかりませんでした。</p>'); } }); });
回答1件
あなたの回答
tips
プレビュー