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

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

ただいまの
回答率

90.12%

処理に応じて関数定義したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 319

wizard

score 19

doneとfail文を別で関数定義したいのですが、.done.failのドットによってエラーになってしまいます。

コード

$('.search__btn').on('click', function () { //検索ボタンがクリックされた時
            comparison();


このように定義し、それにあった処理をまとめたいです。

コード
<script>
$(function(){
          var preSearchword = ''; //空の文字列を入れてあります
          var pageNum = 1; //変数に1を代入
          $('.search__btn').on('click', function () { //検索ボタンがクリックされた時
            comparison();
          });
          $('.search__btn').on('click',function(){
            ss();
          });
          $('.search__btn').on('click',function(){
            zz();
          });
            var searchword = $('.search__text__input').val(); //変数にバリューを取得した値を代入 文字を入力する部分
            if (preSearchword === searchword) { //if文でpreSearchwordとsearchwordが厳密に等しい場合の式を作り
              //console.log(pageNum)
              pageNum++; //1回目の検索結果と2回目クリックされる時の検索結果が同じ場合、1ページずつプラスしていきます
            } else { //そうでない場合
              pageNum = 1; //ページ数を1に戻します 最初のクリックの際は、falseを返します
              $('ul').empty(); //同時に下に表示していたulの子要素をempty()で消します
            }
            preSearchword = searchword; //preSearchwordにsearchwordを入れます
            // console.log(searchword);
            // console.log(searchword);
          function done(){
            $.ajax({
              url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522',
              type: 'GET',
              datatype: 'json',
              data: {
                keyword: searchword, //バリューを取得した変数を、dataのオブジェクトの中のvalueに入れます
                applicationId: '1019399324990976605',
                booksGenreId: '001',
                hits: 20, //検索でヒットした件数を指定
                page: pageNum //ページ数
              },
            })
            .done(function (data) { //doneで処理が完了した時
              console.log(data);
              //検索結果が0件の場合
              if (data.hits === 0) { //if文で、ヒット件数が0と厳密に等しい場合
                $('ul.lists').prepend('<p class="message">検索結果が見つかりませんでした<br>別のキーワードで検索してください</p>'); //listというクラスを持つulの中に、prependでクラスを入れ、pタグを表示させます
              }
              //通信が成功した時
              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(){
            .fail(function () { //通信失敗時は、fail文を使います
              $('.lists').after('<div class="error"></div>') //errorという新たなクラスをlistsの後ろ(中)に挿入します
              error = $('.error'); //変数にクラスを代入
              error.html('<p class="message">データ通信できませんでした<br>接続を確認してください</p>'); //変数に対して、htmlで書き換えて、文字を入力しないで検索をかけた場合と通信がうまくいかなかった時にエラー文を表示させます
            })
          }
        });
    </script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/03/18 14:46

    >.done.failのドットによってエラーになってしまいます。
    https://teratail.com/help/question-tips#questionTips3-4-2
    >表示されたエラーメッセージをそのままコピー&ペーストしましょう。自分でタイプしなおしたり、自分で解釈・要約しようとしてはいけません。

    そもそもそのエラーとやらが提示されていないので、そこも含めて追記願います。
    あと、実際のIDっぽいのが入ってますがこれは全世界に発信して大丈夫ですか?

    キャンセル

回答 1

checkベストアンサー

+1

中身だけ関数にしましょう。

function done(data){
  //中身省略
}

function fail(){
  // 中身省略
}

$.ajax({/* 中身略 */}).done(done).fail(fail);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る