Q&A
もう少し具体的に「どんなコードにしたいか」示していただけませんか？（前回の質問のように「doneだけ」「failだけ」切り出すのでは、どのような点が物足りなかったのでしょうか）
関数を別で定義したいのですが、定義した際のもともとあった.doneや.failをどのようにすれば良いかわかりません。
js クリックイベントが２０行にもなっているコード
1コード 2$(function () { 3 var preSearchword = ''; //空の文字列を入れてあります 4 var pageNum = 1; //変数に１を代入 5 $('.search__btn').on('click', function () { //検索ボタンがクリックされた時 6 var searchword = $('.search__text__input').val(); //変数にバリューを取得した値を代入 文字を入力する部分 7 if (preSearchword === searchword) { //if文でpreSearchwordとsearchwordが厳密に等しい場合の式を作り 8 //console.log(pageNum) 9 pageNum++; //１回目の検索結果と2回目クリックされる時の検索結果が同じ場合、１ページずつプラスしていきます 10 } else { //そうでない場合 11 pageNum = 1; //ページ数を１に戻します 最初のクリックの際は、falseを返します 12 $('ul').empty(); //同時に下に表示していたulの子要素をempty()で消します 13 } 14 preSearchword = searchword; //preSearchwordにsearchwordを入れます 15 // console.log(searchword); 16 // console.log(searchword); 17 $.ajax({ 18 url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522', 19 type: 'GET', 20 datatype: 'json', 21 data: { 22 keyword: searchword, //バリューを取得した変数を、dataのオブジェクトの中のvalueに入れます 23 booksGenreId: '001', 24 hits: 20, //検索でヒットした件数を指定 25 page: pageNum //ページ数 26 }, 27 }) 28 .done(function (data) { //doneで処理が完了した時 29 console.log(data); 30 //検索結果が0件の場合 31 if (data.hits === 0) { //if文で、ヒット件数が0と厳密に等しい場合 32 $('ul.lists').prepend('<p class="message">検索結果が見つかりませんでした<br>別のキーワードで検索してください</p>'); //listというクラスを持つulの中に、prependでクラスを入れ、pタグを表示させます 33 } 34 //通信が成功した時 35 var booklist = ''; //変数に空の文字列を代入 36 $.each(data.Items,function(index,item){ //$.eachで繰り返し処理を行い、 itemは、現在のアクセスのDOM（htmlなどを自由に操作する仕組み）を意味しています。 37 // console.log(item); 38 booklist += '<li class="lists__item">' + index + '<div class="lists__item__inner">' + '<a href="' + // booklistという変数に必要なクラスを加算代入しつつ、全ての要素に対して固有パラメータを入れます 39 item.Item.itemUrl + '"class="lists__item__link" target="_blank">' + '<img src="' + item.Item 40 .largeImageUrl + '" class="lists__item__img" alt="' + item.Item.title + '">' + 41 '<p class="lists__item__detail">作品名： ' + item.Item.title + '</p>' + //itemは、関数の第二引数,Itemは、楽天の個別商品のバリュー,三つ目は、固有パラメーター 42 '<p class="lists__item__detail">作者 ： ' + item.Item.author + '</p>' + 43 '<p class="lists__item__detail">出版社： ' + item.Item.publisherName + '</p>' + '</a>' + 44 '</div>' + '</li>'; 45 }) 46 $('ul.lists').prepend(booklist); //listというクラスを持つulの中にprepend(変数)とし、入れます 47 }) 48 // 通信が失敗した時 49 .fail(function () { //通信失敗時は、fail文を使います 50 $('.lists').after('<div class="error"></div>') //errorという新たなクラスをlistsの後ろ(中)に挿入します 51 error = $('.error'); //変数にクラスを代入 52 error.html('<p class="message">データ通信できませんでした<br>接続を確認してください</p>'); //変数に対して、htmlで書き換えて、文字を入力しないで検索をかけた場合と通信がうまくいかなかった時にエラー文を表示させます 53 }) 54 }); 55 }); 56
上記のコードを関数を定義づけしdoneやfail毎にまとめたいです。
コード $(function () { var preSearchword = ''; //空の文字列を入れてあります var pageNum = 1; //変数に１を代入 $('.search__btn').on('click', function () { //検索ボタンがクリックされた時 test(); }); $('.search__btn').on('click', function () { //検索ボタンがクリックされた時 done(); }); $('.search__btn').on('click', function () { //検索ボタンがクリックされた時 fail(); }); function test() { var searchword = $('.search__text__input').val(); //変数にバリューを取得した値を代入 文字を入力する部分 if (preSearchword === searchword) { //if文でpreSearchwordとsearchwordが厳密に等しい場合の式を作り //console.log(pageNum) pageNum++; //１回目の検索結果と2回目クリックされる時の検索結果が同じ場合、１ページずつプラスしていきます } else { //そうでない場合 pageNum = 1; //ページ数を１に戻します 最初のクリックの際は、falseを返します $('ul').empty(); //同時に下に表示していたulの子要素をempty()で消します } preSearchword = searchword; //preSearchwordにsearchwordを入れます // console.log(searchword); // console.log(searchword); } $.ajax({ url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522', type: 'GET', datatype: 'json', data: { keyword: searchword, //バリューを取得した変数を、dataのオブジェクトの中のvalueに入れます booksGenreId: '001', hits: 20, //検索でヒットした件数を指定 page: pageNum //ページ数 }, }).done(done).fail(fail); if (data.hits === 0) { //if文で、ヒット件数が0と厳密に等しい場合 $('ul.lists').prepend('<p class="message">検索結果が見つかりませんでした<br>別のキーワードで検索してください</p>'); //listというクラスを持つulの中に、prependでクラスを入れ、pタグを表示させます } function done(data) { console.log(data); //検索結果が0件の場合 //通信が成功した時 var booklist = ''; //変数に空の文字列を代入 $.each(data.Items,function(index,item){ //$.eachで繰り返し処理を行い、 itemは、現在のアクセスのDOM（htmlなどを自由に操作する仕組み）を意味しています。 // console.log(item); booklist += '<li class="lists__item">' + index + '<div class="lists__item__inner">' + '<a href="' + // booklistという変数に必要なクラスを加算代入しつつ、全ての要素に対して固有パラメータを入れます 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>' + //itemは、関数の第二引数,Itemは、楽天の個別商品のバリュー,三つ目は、固有パラメーター '<p class="lists__item__detail">作者 ： ' + item.Item.author + '</p>' + '<p class="lists__item__detail">出版社： ' + item.Item.publisherName + '</p>' + '</a>' + '</div>' + '</li>'; }) $('ul.lists').prepend(booklist); //listというクラスを持つulの中にprepend(変数)とし、入れます } // 通信が失敗した時 function fail(data) { $('.lists').after('<div class="error"></div>') //errorという新たなクラスをlistsの後ろ(中)に挿入します error = $('.error'); //変数にクラスを代入 error.html('<p class="message">データ通信できませんでした<br>接続を確認してください</p>'); //変数に対して、htmlで書き換えて、文字を入力しないで検索をかけた場合と通信がうまくいかなかった時にエラー文を表示させます } }); </script>
かしこまりました。
例えば、
$('.test-1').on('click', function() {
test(); // 定義したtestという関数の実行
});
$('.test-2').on('click', function() {
test(); // 定義したtestという関数の実行
});
function test() {
// '.test-1'と'.test-2'がクリックされたときの処理がここに書かれている
}
のようにまとめたいです。
現状のコードには「$('.search__btn').on('click'」1つしかないので、まとめる対象もないと思うのですが。
$('.search__btn').on('click', function () { //検索ボタンがクリックされた時
fail();
});
に対して、function fail(data) {}で書くようにしたいです。
下の方のコードでfail()関数を作っているようですが、そこから更に改善したいのでしょうか。
その関数の書き方は合っていますでしょうか。
あなたの回答
tips
プレビュー
