前提・実現したいこと
プログラミング初学者です。
楽天apiを使った開発について検索ワードが変わった際の表現がうまくできません。みなさまのお力を借りたいです。
発生している問題・エラーメッセージ
if(前の検索キーワード === 最新の検索キーワード){}というように条件指定したいのですが、知識不足で前の検索キーワードの表現方法がわかりません。
該当のソースコード
ソースコード
``````html```
<!doctype html>
<html>
<head>
//省略
</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="省略"></script>
<script>
$(function(){
// DOMが読み込み完了したら以下を実行。
var pageNum = 0;
// 変数pageNumを宣言。ページ1からスタートしたいので、最初は0としておく。
var list = $('.lists');
var msg = $('.massage');
// 変数listで'.lists'をすぐ呼び出せるようにする。
$('#js-search-button').on('click', function(){
// '.search'をクリックすると発火。
var keyword = $('#js-search-word').val();
// 変数keywordに検索欄に入力したキーワード情報を格納。最新のキーワード
list.empty();
// リストを一旦空にする。
if(前の検索ワード === 最新の検索ワード){
pageNum += 1;
// ページを1追加。
}else{
pageNum = 1;
}
$.ajax({
url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522',
type: 'GET',
// リソースを取得したいのでGETでhttpリクエスト。
datatype: 'json',
data: {
applicationId: '指定済',
booksGenreId: '指定済',
keyword: keyword,
// keywordオプションの欄に変数keywordで取得した値を入れる
hits: '20',
// 一回に表示される商品数を20に指定。
page: pageNum
// 変数pageNumを使用。
},
})
.done(function(data){
// 通信が成功すると以下を実行。取得したデータはdataに入っている。
console.log(data);
var listItem = '';
// 変数listItemを作り、空の文字列にする。
if(data.count > 0){
// ヒットした商品数が1以上の時、以下を実行。
$('.message').remove();
// '.message'を削除する処理。
$.each(data.Items, function(i, val){
// eachメソッドで繰り返し処理。
listItem += '<li class="lists__item">' + '<div class="lists__item__inner">' + '<a href="'+ val.Item.itemUrl +'" class="lists__item__link" target="_blank">' + '<img src="'+ val.Item.largeImageUrl +'" class="lists__item__img" alt="">' + '<p class="lists__item__detail">作品名:'+ val.Item.title +'</p>' + '<p class="lists__item__detail">作者:'+ val.Item.author +'</p>' + ' <p class="lists__item__detail">出版社:'+ val.Item.publisherName+'</p>' + '</a>' + '</div>' + '</li>';
});
list.prepend(listItem);
// prependメソッドでlistItemで作ったhtml要素を挿入。htmlメソッドだと要素を置き換えてしまう。appendだと要素の一番後ろに追加してしまう。
} if(data.count === 0) {
// 検索結果が0の時以下を実行。
$('.message').remove();
// '.message'を削除する処理。
list.empty();
// 一度表示している商品を全て非表示にする。
var nothing = '検索結果が見つかりませんでした。' + '<br/>' + '別のキーワードで検索して下さい。';
// 変数nothingを作成。検索結果が0の時に表示したい文をp要素に入れておく。
list.before('<div class="message"></div>');
// beforeメソッドでul要素よりも前にdiv要素を追加。
var msg = $('.message');
msg.html(nothing);
// 追加したdiv要素の中でhtmlメソッドでnothingを展開。
}
})
.fail(function(data){
// ajax通信が失敗した時の挙動を以下に記述。
list.text('error!');
// textメソッドを用いて'error!'というテキストを表示させる。
});
});
});
</script>
</body>
</html>
コード
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/02 07:07