質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

2165閲覧

楽天API 同じキーワードで検索すると重複してしまうのを避けたい

wizard

総合スコア25

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2019/03/14 05:19

楽天apiを使い、キーワードで検索して結果が出た状態で、もう一度検索ボタンを押すとデータが追加されて表示されるようにしたいです。
一回の検索で20件商品が表示され、もう一度検索ボタンを押すと降順で20件追加されてどんどん増えて行く仕様を目指しています。
ただ、この動きは同一のキーワードの時のみで、途中で他のキーワードで検索したら結果はクリアされてまた20件新たに出るようにしたいです。

html

1コード 2<!doctype html> 3<html> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 7 <meta name="format-detection" content="telephone=no"> 8 <title>jQuery</title> 9 <link rel="stylesheet" href="../../common/css/reset.css"> 10 <link rel="stylesheet" href="../../common/css/base.css"> 11 <link rel="stylesheet" href="./css/style.css"> 12 </head> 13 <body> 14 <div class="wrap"> 15 <div class="container"> 16 <div class="header"> 17 <p class="header__title">Search Books!</p> 18 </div> 19 <div class="search"> 20 <div class="search__text"> 21 <input type="text" id="js-search-word" class="search__text__input" placeholder="検索する"> 22 </div> 23 <button id="js-search-button" class="search__btn">検索する</button> 24 </div> 25 <ul class="lists"></ul> 26 </div> 27 </div> 28 </body> 29</html>

js

1コード 2<script> 3$(function () { 4 $('.search__btn').on('click', function () { 5 var searchword = $('.search__text__input').val(); 6 console.log(searchword); 7 // console.log(searchword); 8 $.ajax({ 9 url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522', 10 type: 'GET', 11 datatype: 'json', 12 data: { 13 keyword: searchword, 14 applicationId: '1019399324990976605', 15 booksGenreId: '001', 16 hits: 20 17 }, 18 }) 19 .done(function (data) { 20 console.log(data); 21 //検索結果が0件の場合 22 if (data.hits === 0) { 23 $('.lists').after('<div class="coment"></div>') 24 message = $('.coment'); 25 message.html('<p class="message">検索結果が見つかりませんでした。<br>別のキーワードで検索してください。</p>'); //コメントの中をhtmlで書き換える 26 } 27 //通信が成功した時 28 $.each(data.Items,function(index,item){ 29 console.log(item); 30 var booklist = ('<li class="lists__item">' + '<div class="lists__item__inner">' + '<a href="' + 31 item.Item.itemUrl + '"class="lists__item__link" target="_blank">' + '<img src="' + item.Item 32 .largeImageUrl + '" class="lists__item__img" alt="' + item.Item.title + '">' + 33 '<p class="lists__item__detail">作品名: ' + item.Item.title + '</p>' + 34 '<p class="lists__item__detail">作者 : ' + item.Item.author + '</p>' + 35 '<p class="lists__item__detail">出版社: ' + item.Item.publisherName + '</p>' + '</a>' + 36 '</div>' + '</li>'); 37 $('ul.lists').append(booklist); 38 }) 39 }) 40 // 通信が失敗した時 41 .fail(function () { 42 43 }); 44 }); 45 }); 46 </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

$('ul.lists').empty();とすれば消えると思います。

投稿2019/03/16 05:35

Lhankor_Mhy

総合スコア36078

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問