前提・実現したいこと
検索ボックスにキーワードを入れ、検索ボタンを押した時に、楽天ブックスAPIからデータを取得し20件ずつ一覧に表示する。
別のワードで検索した時、最初の20件は削除され、次の新しい20件が表示されるようにし、同じワードで検索した時は、最初の20件の上に21件目から40件目が表示されるようにしたいです。
よろしくお願いいたします。
発生している問題・エラーメッセージ
現在、別のワードのところまでは上手くいったのですが、同じワードで検索した際に、最初の20件の下に21~40件目が表示されてしまいます。
イメージとしては、下記のような感じです。
<ul class="lists"> **→ここに<li></li>21~40件目を追加したい** <li class = "lists__item">...</li> // 0 // <li></li> 1~18 // <li class = "lists__item">...</li> // 19 **→現在はこっちに<li></li>21~40件目が追加されてしまっている。** </ul>
該当のソースコード
<script> $(function() { var pageNum = 0; // pageNumという変数に0と宣言 var prevword = ''; // prevwordという変数に空の文字列を定義 // 0件だった時の関数 var zeroMessage = function() { // zeroMessageという変数に次の関数を定義 $('.lists').after('<div class = "coment"></div>') // listsの後にクラスを追加 coment = $('.coment'); // comentに.comentを定義 coment.html('<p class = "message">検索結果が0件でした。<br>キーワードを変えて検索してください。</p>'); // comentにhtmlメソッドを用いて、0件だった時のコメントを追加 }; var failMessage = function() { // failMessageという変数に次の関数を定義 $('.lists').after('<div class = "datacoment"></div>') // listsの後にクラスを追加 datacoment = $('.datacoment'); // datacomentに.datacomentを定義 datacoment.html('<p class = "failmessage">データ通信できませんでした。<br>接続を確認してください。</p>'); // datacomentに失敗した時のコメントを追加 }; var success = function(data) { if(data.count > 0) { // data.countが0よりも大きいとき $.each(data.Items,function(i,item) { // data.Itemsに対して次の関数を繰り返し実行 var list = ''; list += '<li class = "lists__item">' + i + '<div class="lists__item__inner">' + '<a href="' + item.Item.itemUrl + '"class="lists__item__link" target="_blank">' + '<img src="' + item.Item.largeImageUrl + '" class="lists__item__img" alt="' + item.Item.title + '">' + '<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>'; // listという変数にテンプレートを代入 var contentsList = $('.lists').append(list); // listsの後にlistを追加を変数contentsListに定義 ** // ここから** if(pageNum > 1) { // 2ページ目以降の時 $('.lists').prepend(contentsList); // .listsの前にcontentsListを追加 **// ここの3行に問題がありそうです。** } }) } else if(data.count === 0) { // data.countが0件だった時 zeroMessage(); // 先程定義した関数を実行 } }; var search__btn = function() { // .search__btnがクリックされた時の処理 pageNum = pageNum + 1; //変数pageNumに1ずつ加算 var searchword = $('#js-search-word').val(); // searchwordという変数に#js-search-wordを定義。#js-search-wordのval属性を取得 if(prevword !== searchword) { // prevwordがsearchwordと異なるとき pageNum = 1; // pageNumを1にする $('ul').empty(); // ulの中身を空にする prevword = searchword; // searchwordにprevwordを保存 } console.log(searchword); $.ajax({ // データの取得 url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522', type: 'GET', datatype: 'json', data: { applicationId: '', booksGenreId: '001', size: '0', hits: '20', page: pageNum, keyword: searchword, } }) .done(function(data) { // データ通信に成功した場合 success(data); }).fail(function() { // データ通信に失敗した場合 failMessage(); // 先程定義した関数を実行 }) }; $('.search__btn').on('click',function() { search__btn(); // 定義したsearch__btnという関数の実行 }); }); </script>
試したこと
append,prepend,before,afterなど追加するメソッドを色々試してみました。
しかし、単純に上に追加されなかったり、追加されたと思えば下記のように21~40件目が逆になってしまったりしています...
<li class = "lists__item">...</li> // 39 <li>...</li> //38~21 次の20件(21~40) // <li class = "lists__item">...</li> // 20 <li class = "lists__item">...</li> // 0 <li>...</li> //1~18 最初の20件(1~20) // <li class = "lists__item">...</li> // 19
補足情報(FW/ツールのバージョンなど)
<!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"> **//この部分にテンプレートのlistが入ります//** </ul> </div> </div> <script src="../../common/js/jquery.js"></script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/03 00:55
2019/04/03 01:31
2019/04/03 02:24
2019/04/03 02:25
2019/04/03 10:37