テンプレートリテラルを使わず、DOMを表示

現在、改善箇所にはテンプレートリテラルを使っていいるのですが、使わずHTMLに表示する方法を教えていただきたいです。

↓現在このように進めているのですがなかなかうまくいきません。
$(".message").remove();
          $.each(result, function(index, item) {
          var template =  '<li class="lists__item">' +
                           '<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>';
          });
          $('.lists').append(template);
        }

↓改善したい箇所

↓一部
template +=  `<li class='lists__item'>
                          <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>`;

 var pager = `<div class="js-pager">
               <ul class="btn-wrapper">
                 <li class="prev btn-item">
                   <a class="btn-anchor" href="#">前へ</a>
                 </li>
                 <li class="next btn-item">
                   <a class="btn-anchor" href="#">次へ</a>
                 </li>
               </ul>
              </div>`;


↓全体
function showResult(result) {
          $('.message').remove();
          var template= '';
          $.each(result, function(index, item) {
          template +=  `<li class='lists__item'>
                          <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>`;
          });
          $('.lists').html(template);
        }
        
        function showPager(result) {
          $('.js-pager').remove();
          $('.prev, .next').removeClass('disabled');
          var pager = `<div class="js-pager">
                        <ul class="btn-wrapper">
                          <li class="prev btn-item">
                            <a class="btn-anchor" href="#">前へ</a>
                          </li>
                          <li class="next btn-item">
                            <a class="btn-anchor" href="#">次へ</a>
                          </li>
                        </ul>
                      </div>`;

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

JQuery
1<script src="../../common/js/jquery.js"></script>
2    <script>
3      $(function() {
4        var parameter = {
5          applicationId: '1013041242368735405',
6          keyword: '',
7          hits: 20,
8          page: 1,
9          booksGenreId: '001',
10        };
11
12        var isLastPage = false;
13        $('.search__btn').on('click', function() {
14          init();
15          request();
16        });
17
18        $(document).on('click', '.prev', function() {
19          if(parameter.page === 1) return false;
20          isLastPage = false;
21          parameter.page -- ;
22          request();
23        });
24
25        $(document).on('click', '.next', function() {
26          if(isLastPage) return noMorePageMessage();
27          parameter.page ++ ;
28          request();
29        });
30        
31        function request() {
32          parameter.keyword = $('#js-search-word').val();
33          $.ajax ({
34            url:'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522',
35            type: 'GET',
36            datatype: 'json',
37            data: parameter,
38          }).done(function(data) {
39            if(data.count === 0) {
40              notFoundMessage();
41            }else {
42              showResult(data.Items);
43              showPager(data);
44            }if (parameter.page === data.pageCount) isLastPage = true;
45          }).fail(function(e) {
46            responseErrorMessage(e);
47          });
48        }
49
50       function init() {
51          parameter.page = 1;
52          isLastPage = false;
53          $('.message').remove();
54          $('.lists').empty();
55        };
56
57        function notFoundMessage() {
58          $('.message').remove();
59          $('.lists').before('<div class="message">検索結果が見つかりませんでした。<br>別のキーワードで検索して下さい。</div>');
60        }
61
62        function noMorePageMessage() {
63          $('.message').remove();
64          $('.lists').before('<div class="message">これ以上はありません</div>');
65        }
66
67        function responseErrorMessage(e) {
68          $('.message').remove();
69          if (e.status === 0) {
70            $('.lists').before('<div class="message">通信に失敗しました。インターネットの接続をご確認ください。</div>');
71          }else if (e.status === 400) {
72            $('.lists').before('<div class="message">検索文字が空、もしくは半角英数1文字になっています。</div>');
73          }else if (e.status === 429) {
74            $('.lists').before('<div class="message">リクエスト過多です。<br>しばらく時間を空けてから、ご利用ください。</div>');
75          }else {
76            $('.lists').before('<div class="message">予期せぬエラーが発生しました.</div>');
77          }
78        }
79
80        function showResult(result) {
81          $('.message').remove();
82          var template= '';
83          $.each(result, function(index, item) {
84          template +=  `<li class='lists__item'>
85                          <div class='lists__item__inner'>
86                            <a href='${item.Item.itemUrl}' class='lists__item__link' target='_blank'>
87                              <img src='${item.Item.largeImageUrl}' class='lists__item__img' alt='${item.Item.title}'>
88                              <p class='lists__item__detail'>作品名：${item.Item.title}</p>
89                              <p class='lists__item__detail'>作者　：${item.Item.author}</p>
90                              <p class='lists__item__detail'>出版社：${item.Item.publisherName}</p>
91                            </a>
92                          </div>
93                         </li>`;
94          });
95          $('.lists').html(template);
96        }
97        
98        function showPager(result) {
99          $('.js-pager').remove();
100          $('.prev, .next').removeClass('disabled');
101          var pager = `<div class="js-pager">
102                        <ul class="btn-wrapper">
103                          <li class="prev btn-item">
104                            <a class="btn-anchor" href="#">前へ</a>
105                          </li>
106                          <li class="next btn-item">
107                            <a class="btn-anchor" href="#">次へ</a>
108                          </li>
109                        </ul>
110                      </div>`;
111          $('.lists').after(pager);
112          if(result.page === 1) {
113            $('.prev').addClass('disabled');
114          }if(result.page === result.pageCount) {
115            $('.next').addClass('disabled');
116          }
117        }
118      });
119    </script>

kei344

2020/04/08 11:27

提示のコードは1部分に過ぎず、成立しません。コード全体を提示することをお勧めします。テンプレートリテラルを使ったコードがあるなら、それも質問文に追記してください。

退会済みユーザー

2020/04/08 13:17

ご指摘ありがとうございます。修正しました。

yambejp

2020/04/09 00:13

どこの部分を書き換えたいのか提示ください jQueryのDOM処理的対応すればいいのですよね？

退会済みユーザー

2020/04/09 01:22

ご指摘ありがとうございます。一応見やすいように修正したつもりなのですが、見にくいようでしたら申し訳ありませんがご指摘していただけると嬉しいです。

yambejp

2020/04/09 01:25

「見にくい」のではなく、どうしたいかを聞いているだけなのですが・・ templateの文字列で流し込むのではなくappendで処理したいということなのか？方針がよくわからないという確認です

退会済みユーザー

2020/04/09 01:55

appendでの処理を教えていただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

解決しましたので解答を載せます。

function showResult(result) {
          $(".message").remove();
          var template= '';
          $.each(result, function(index, item) {
          template +=  '<li class="lists__item">' +
                          '<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>';
          });
          $('.lists').html(template);
        }


function showPager(result) {
          $('.js-pager').remove();
          $('.prev, .next').removeClass('disabled');
          var pager = '<div class="js-pager">' +
                        '<ul class="btn-wrapper">' +
                          '<li class="prev btn-item">' +
                            '<a class="btn-anchor" href="#">前へ</a>' +
                          '</li>' +
                          '<li class="next btn-item">' +
                            '<a class="btn-anchor" href="#">次へ</a>' +
                          '</li>' +
                        '</ul>' +
                      '</div>';
          $('.lists').after(pager);
          if(result.page === 1) {
            $('.prev').addClass('disabled');
          }if(result.page === result.pageCount) {
            $('.next').addClass('disabled');
          }
        }
      });

投稿2020/04/09 02:38

退会済みユーザー

総合スコア0