bhouseWeb/public/js/cz_filter.js

// 選擇風格處理
function change_style() {
  style = this.value;

  // 更新畫面資料
  update_info(style, roomsize, budget);
}

// 選擇坪數處理
function change_roomsize() {
  roomsize = this.value;

  // 更新畫面資料
  update_info(style, roomsize, budget);
}

// 選擇預算處理
function change_budget() {
  budget = this.value;

  // 更新畫面資料
  update_info(style, roomsize, budget);
}

// 更新畫面資料
function update_info(style, roomsize, budget) {
  var items = []; // 作品集資料清單

  // 讀取作品集資料(json)
  fetch('http://127.0.0.1:1313/data/test.json')
    .then(response => response.json())
    .then(data => {
      console.log('讀取作品集資料(json)....');
      console.log(data['items']);

      items = data['items'];
      
      console.log('載入符合篩選條件(' + style + ',' + roomsize + ',' + budget + ')的作品...........');
  
      var content = "";

      for(var i = 0; i < items.length; i++) {
        var style_check = (style == '風格不限') ? true : (style == items[i]['style']);
        var roomsize_check = (roomsize == '坪數不限') ? true : (roomsize == items[i]['roomsize']);
        var budget_check = (budget == '預算不限') ? true : (budget == items[i]['budget']);     

        if (style_check && roomsize_check && budget_check) {
          console.log('作品' + i + '，符合篩選條件...');

          content += ' \
            <div class="col"> \
              <div class="card h-100"> \
                <a href="' + items[i]['url'] + '" target="_blank"> \
                  <amp-img \
                    class="card-img-top" \
                    alt="' + items[i]['title'] + '" \
                    src="' + items[i]['image'] + '" \
                    height="533" \
                    width="800" \
                    layout="responsive"> \
                    </amp-img> \
                </a> \
                <div class="card-body"> \
                    <a href="' + items[i]['url'] + '" target="_blank"> \
                        <h3 class="card-title"><b>' + items[i]['title'] + '</b></h3> \
                    </a> \
                    <p class="card-text">' + items[i]['description'] + '</p> \
                </div> \
              </div> \
            </div>';
        } else {
          console.log('作品' + i + '，不符合篩選條件...');
        }

        console.log(items[i]);
      }
    
      // 載入符合篩選條件的作品
      var update_info = document.querySelectorAll('.update_info');

      // 更新畫面
      for(var i = 0; i < update_info.length; i++) {
        update_info[i].innerHTML = content;  
      }
  }).catch((error) => {
    console.log('error');
    console.log('error',error);

    console.error('Error:', error);
  });
}

// 預設選項值
var style = "風格不限"
var roomsize = "坪數不限"
var budget = "預算不限"

// 風格
var items = document.getElementsByClassName('style'); 
for(var i = 0; i < items.length; i++) {
  console.log('選擇風格..........');
  items[i].addEventListener("change", change_style);
}

// 坪數
var items = document.getElementsByClassName('roomsize'); 
for(var i = 0; i < items.length; i++) {
  console.log('選擇坪數..........');
  items[i].addEventListener("change", change_roomsize);
}

// 預算
var items = document.getElementsByClassName('budget'); 
for(var i = 0; i < items.length; i++) {
  console.log('選擇預算..........');
  items[i].addEventListener("change", change_budget);
}