質問編集履歴

変更

2019/02/27 08:34

投稿

Chandler_Bing

スコア673

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -11,3 +11,441 @@
 ちなみにAjaxの処理自体は成功しています。
+これがコードです。
+```JS
+$(function() {
+  var array = [];
+  var hotel = null;
+  var process = null;
+  var top = 0;
+  var normaltop = 0;
+  var sorttop = 0;
+  var normalFlag = false;
+  var sortflag = false;
+  function hotelClone() {
+    var hotel = $("<div>", {
+      "class": "hotel"
+    });
+    var hotelpics = $("<div>", {
+      "class": "hotelpics"
+    });
+    var mainpic = $("<div>", {
+      "class": "mainpic"
+    });
+    var others = $("<div>", {
+      "class": "others"
+    });
+    var hotelinfo = $("<div>", {
+      "class": "hotelinfo"
+    });
+    var hotelname = $("<a>", {
+      "class": "hotelname"
+    });
+    var tags = $("<div>", {
+      "class": "tags"
+    });
+    var rating = $("<div>", {
+      "class": "rating"
+    });
+    var rateposition = $("<span>", {
+      "class": "rateposition"
+    });
+    var price = $("<div>", {
+      "class": "price"
+    });
+    var clear = $("<div>", {
+      "class": "clear"
+    });
+    hotelpics.append(mainpic, others);
+    rating.append(rateposition);
+    hotelinfo.append(hotelname, tags, rating, price);
+    result = hotel.append(hotelpics, hotelinfo, clear);
+    return result;
+  };
+  function getHotels(process, top) {
+    return $.post('ajax.php', {
+      word: word,
+      kind: 'hotels',
+      process: process,
+      top: top
+    });
+  };
+  function getPics() {
+    return $.post('ajax.php', {
+      word: word,
+      kind: 'pics'
+    });
+  };
+  function getTags() {
+    return $.post('ajax.php', {
+      word: word,
+      kind: 'tags'
+    });
+  };
+  function getRates() {
+    return $.post('ajax.php', {
+      word: word,
+      kind: 'rate'
+    });
+  };
+  function displayHotels(process) {
+    // if (process === 'normal') {
+    //   normalFlag = true;
+    //   sortflag = false;
+    //   top = normaltop;
+    // } else if (process === 'sortbyprice') {
+    //   sortflag = true;
+    //   normalFlag = false;
+    //   top = sorttop;
+    // }
+    getHotels(process, 0).done(function(result) {
+      hotels = result;
+      console.log(hotels)
+      // if (hotels.length > 0) {
+        // if (normalFlag === true) {
+        //   normaltop = normaltop + hotels.length;
+        // } else if (sortflag === true) {
+        //   sorttop = sorttop + hotels.length;
+        // }
+        getPics().done(function(result) {
+          hotelpics = result;
+          getTags().done(function(result) {
+            hoteltags = result;
+            getRates().done(function(result) {
+              hotelrates = result;
+              var hotelsClone = []; //これから表示するホテルが入る
+              var hotelName = null;
+              var href = null;
+              var hotelMainPic = null;
+              var others1 = null;
+              var others2 = null;
+              var others3 = null;
+              var tags = [];
+              var rateWord = null;
+              var rate = null;
+              var price = null;
+              $.each(hotels, function(hotelindx, hotel) {
+                hotelsClone.push(hotelClone());
+                hotelName = hotel.hotel_name;
+                href = 'about.php?hotelid=' + hotel.hotel_id + '&countrycode=' + hotel.country_code;
+                hotelsClone[hotelindx].find('.hotelname').append(hotelName);
+                hotelsClone[hotelindx].find('.hotelname').attr('href', href);
+                tags = [];
+                $.each(hoteltags, function(index, hoteltag) {
+                  if (hotel.hotel_id === hoteltag.hotel_id && hotel.country_code === hoteltag.country_code) {
+                    tags.push(hoteltag.tag);
+                  }
+                });
+                for (var i = 0; i < tags.length; i++) {
+                  hotelsClone[hotelindx].find('.tags').append('<span>' + tags[i]);
+                }
+                price = hotel.price + '/1泊(1人)';
+                $.each(hotelrates, function(index, hotelrate) {
+                  if (hotel.hotel_id === hotelrate.hotel_id && hotel.country_code === hotelrate.country_code) {
+                    rateWord = hotelrate.ratingresult
+                    rate = hotelrate.rate;
+                    hotelsClone[hotelindx].find('.rating .rateposition').append('<span>' + rateWord);
+                    hotelsClone[hotelindx].find('.rating .rateposition').append('<span class="rate">' + rate);
+                  }
+                });
+                hotelsClone[hotelindx].find('.price').append('<span>' + price);
+                $.each(hotelpics, function(index, hotelpic) {
+                  if (hotel.hotel_id === hotelpic.hotel_id && hotel.country_code === hotelpic.country_code) {
+                    hotelMainPic = '<img' + ' src' + '="' + 'imgs/' + hotelpic.main_pic + '">';
+                    others1 = '<img' + ' src' + '="' + 'imgs/' + hotelpic.others1 + '">';
+                    others2 = '<img' + ' src' + '="' + 'imgs/' + hotelpic.others2 + '">';
+                    others3 = '<img' + ' src' + '="' + 'imgs/' + hotelpic.others3 + '">';
+                    hotelsClone[hotelindx].find('.mainpic').append(hotelMainPic);
+                    hotelsClone[hotelindx].find('.others').append(others1);
+                    hotelsClone[hotelindx].find('.others').append(others2);
+                    hotelsClone[hotelindx].find('.others').append(others3);
+                  }
+                });
+                hotelsClone[hotelindx].find('.mainpic img').height(300).width(300);
+                hotelsClone[hotelindx].find('.others img').height(85).width(85);
+              });
+              for (var i = 0; i < hotelsClone.length; i++) {
+                $('.mainrequirements').after(hotelsClone[i]);
+              }
+              hotelsClone = [];
+              top = 0; //念の為初期化
+            });
+          });
+        });
+      // }
+    });
+  }
+  //最初の処理
+  displayHotels('normal');
+  //ここからクリック処理
+  $('#sortbyprice').on('click', function() {
+    if (!$(this).hasClass('selected')) {
+      $('mainrequirement').removeClass('selected');
+      $(this).addClass('selected');
+      process = $(this).attr('id');
+      $('.hotel').remove();
+      displayHotels(process);
+      return false;
+    }
+  });
+  //ここからスクロール処理
+  $(window).on('scroll', function() {
+    if ((normaltop + sorttop) % 5 === 0) {
+      var doch = $(document).innerHeight(); //ページ全体の高さ
+      var winh = $(window).innerHeight(); //ウィンドウの高さ
+      var bottom = doch - winh; //ページ全体の高さ - ウィンドウの高さ = ページの最下部位置
+      if (bottom <= $(window).scrollTop()) {
+        //一番下までスクロールした時に実行
+        if (normalFlag === true) {
+          displayHotels('normal');
+        } else if (sortflag === true) {
+          displayHotels('sortbyprice');
+        }
+      }
+    }
+  });
+});
+```