|
|
<div class="filter-box">
|
|
|
<div class="filter-left">
|
|
|
<div class="filter-item">
|
|
|
<input type="radio" name="tab1" id="tab1a" class="tabs">
|
|
|
<label for="tab1a" class="open filter-nav">Theme</label>
|
|
|
<input type="radio" name="tab1" id="tab1ac" class="tabs close">
|
|
|
<label for="tab1ac" class="close">×</label>
|
|
|
<input type="radio" name="tab1" id="tab1ad" class="tabs overlay">
|
|
|
<label for="tab1ad" class="modal-overlay"></label>
|
|
|
<div class="filter-popup">
|
|
|
<ul id="theme-list">
|
|
|
<?php foreach ($allTypeList->extendType as $ltItem) { ?>
|
|
|
<li><a href="javascript:;" data-id="<?php echo $ltItem->SYC_SN ?>"><?php echo $ltItem->SYC2_CodeDiscribe ?></a></li>
|
|
|
<?php } ?>
|
|
|
</ul>
|
|
|
<div class="popup-bottom">
|
|
|
<a href="javascript:;" class="clearbtn" id="clear-theme"><strong>Clear</strong></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="filter-item">
|
|
|
<input type="radio" name="tab1" id="tab1b" class="tabs">
|
|
|
<label for="tab1b" class="open filter-nav">Hours</label>
|
|
|
<input type="radio" name="tab1" id="tab1bc" class="tabs close">
|
|
|
<label for="tab1bc" class="close">×</label>
|
|
|
<input type="radio" name="tab1" id="tab1bd" class="tabs overlay">
|
|
|
<label for="tab1bd" class="modal-overlay"></label>
|
|
|
<div class="filter-popup">
|
|
|
<ul id="hours-list">
|
|
|
<li><a href="javascript:;" data-day="1-3">1-3 Hours</a></li>
|
|
|
<li><a href="javascript:;" data-day="4-5">4-5 Hours</a></li>
|
|
|
<li><a href="javascript:;" data-day="6-8">6-8 Hours</a></li>
|
|
|
<li><a href="javascript:;" data-day="9-10">9-10 Hours</a></li>
|
|
|
</ul>
|
|
|
<div class="popup-bottom">
|
|
|
<a href="javascript:;" class="clearbtn" id="clear-hours"><strong>Clear</strong></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="filter-item">
|
|
|
<input type="radio" name="tab1" id="tab1c" class="tabs">
|
|
|
<label for="tab1c" class="open filter-nav">Price</label>
|
|
|
<input type="radio" name="tab1" id="tab1cc" class="tabs close">
|
|
|
<label for="tab1cc" class="close">×</label>
|
|
|
<input type="radio" name="tab1" id="tab1cd" class="tabs overlay">
|
|
|
<label for="tab1cd" class="modal-overlay"></label>
|
|
|
<div class="filter-popup">
|
|
|
<p class="popup-title"></p>
|
|
|
<ul id="price-list">
|
|
|
<li><a href="javascript:;" data-price="0-49">< $50</a></li>
|
|
|
<li><a href="javascript:;" data-price="50-100">$50-$100</a></li>
|
|
|
<li><a href="javascript:;" data-price="101-200">$101-$200</a></li>
|
|
|
<li><a href="javascript:;" data-price="201-300">$201-$300</a></li>
|
|
|
<li><a href="javascript:;" data-price="301-10000">> $300</a></li>
|
|
|
</ul>
|
|
|
<div class="popup-bottom">
|
|
|
<a href="javascript:;" class="clearbtn" id="clear-price"><strong>Clear</strong></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="filter-right"><strong><span id="all-count">0</span> activities in Shanghai</strong></div>
|
|
|
</div>
|
|
|
<div class="flex-row4" id="js_tourlist">
|
|
|
<div class="flex-col border-box"><a href="#" rel="nofollow"><span class="flag-box"></span><img alt="most classic china tour" class="img-responsive" src="http://data.chinatravel.com/images/homepage/600-450/guilin-landscape.jpg"></a>
|
|
|
<div class="caption">
|
|
|
<h3><a href="#">Suzhou and Tongli Water Town Tour from Shanghai</a></h3>
|
|
|
<ul class="card-ul">
|
|
|
<li class="card-hours">4-Hours</li>
|
|
|
</ul>
|
|
|
<div class="caption-btn">
|
|
|
<p>From <span class="baseprice font24">US$3949</span></p>
|
|
|
<p><a aria-label="button" class="btn-base" href="#" rel="nofollow">View More</a></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
var TourData = <?php echo json_encode($dayTripListData, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>;
|
|
|
// 如果$tourListData可能为null，可以添加默认值
|
|
|
TourData = TourData || [];
|
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
// 获取DOM元素
|
|
|
const tourListContainer = document.getElementById('js_tourlist');
|
|
|
const allCountSpan = document.getElementById('all-count');
|
|
|
|
|
|
// 初始化筛选器
|
|
|
setupFilter('theme-list', 'clear-theme');
|
|
|
setupFilter('hours-list', 'clear-hours');
|
|
|
setupFilter('price-list', 'clear-price');
|
|
|
|
|
|
// 通用函数：设置筛选列表的点击和清除功能
|
|
|
function setupFilter(listId, clearBtnId) {
|
|
|
const list = document.getElementById(listId);
|
|
|
const clearBtn = document.getElementById(clearBtnId);
|
|
|
|
|
|
if (!list || !clearBtn) return;
|
|
|
|
|
|
// 点击列表项
|
|
|
list.addEventListener('click', function(e) {
|
|
|
const target = e.target.closest('li');
|
|
|
if (target && e.target.tagName === 'A') {
|
|
|
target.classList.toggle('active');
|
|
|
filterAndDisplayTours();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 清除按钮
|
|
|
clearBtn.addEventListener('click', function() {
|
|
|
const activeItems = list.querySelectorAll('.active');
|
|
|
activeItems.forEach(item => {
|
|
|
item.classList.remove('active');
|
|
|
});
|
|
|
filterAndDisplayTours();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 筛选并显示旅游项目
|
|
|
function filterAndDisplayTours() {
|
|
|
|
|
|
// 获取选中的主题
|
|
|
const selectedThemes = [];
|
|
|
document.querySelectorAll('#theme-list li.active a').forEach(a => {
|
|
|
selectedThemes.push(a.getAttribute('data-id'));
|
|
|
});
|
|
|
|
|
|
// 获取选中的时间范围
|
|
|
const selectedHourRanges = [];
|
|
|
document.querySelectorAll('#hours-list li.active a').forEach(a => {
|
|
|
selectedHourRanges.push(a.getAttribute('data-day'));
|
|
|
});
|
|
|
|
|
|
// 获取选中的价格范围
|
|
|
const selectedPriceRanges = [];
|
|
|
document.querySelectorAll('#price-list li.active a').forEach(a => {
|
|
|
selectedPriceRanges.push(a.getAttribute('data-price'));
|
|
|
});
|
|
|
|
|
|
// 筛选旅游数据
|
|
|
const filteredTours = TourData.filter(tour => {
|
|
|
|
|
|
// 检查主题
|
|
|
const themeMatch = selectedThemes.length === 0 ||
|
|
|
(tour.extendType && selectedThemes.some(theme =>
|
|
|
tour.extendType.split(',').includes(theme)));
|
|
|
|
|
|
// 检查时间
|
|
|
const hourMatch = selectedHourRanges.length === 0 ||
|
|
|
selectedHourRanges.some(range => {
|
|
|
const [min, max] = range.split('-').map(Number);
|
|
|
const needTime = parseFloat(tour.needTime) || 0;
|
|
|
return needTime >= min && needTime <= max;
|
|
|
});
|
|
|
|
|
|
// 检查价格
|
|
|
const priceMatch = selectedPriceRanges.length === 0 ||
|
|
|
selectedPriceRanges.some(range => {
|
|
|
const [min, max] = range.split('-').map(Number);
|
|
|
// 处理空价格或无效价格情况
|
|
|
if (tour.price === undefined || tour.price === null || tour.price === "") return false;
|
|
|
|
|
|
// 转换价格为数字
|
|
|
const price = typeof tour.price === 'string'
|
|
|
? parseFloat(tour.price.replace(/[^0-9.]/g, ''))
|
|
|
: Number(tour.price);
|
|
|
|
|
|
// 检查价格是否在范围内
|
|
|
return !isNaN(price) && price >= min && price <= max;
|
|
|
});
|
|
|
|
|
|
return themeMatch && hourMatch && priceMatch;
|
|
|
});
|
|
|
|
|
|
// 更新总计数
|
|
|
allCountSpan.textContent = filteredTours.length;
|
|
|
|
|
|
// 显示筛选结果
|
|
|
displayTours(filteredTours);
|
|
|
}
|
|
|
|
|
|
// 显示旅游项目
|
|
|
function displayTours(tours) {
|
|
|
// 清空现有内容
|
|
|
tourListContainer.innerHTML = '';
|
|
|
|
|
|
// 如果没有结果，显示提示
|
|
|
if (tours.length === 0) {
|
|
|
tourListContainer.innerHTML = '<div class="no-results">No tours found matching your criteria.</div>';
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 遍历并添加每个旅游项目
|
|
|
tours.forEach(tour => {
|
|
|
// 格式化时间显示
|
|
|
const needTime = parseFloat(tour.needTime) || 0;
|
|
|
let timeDisplay = '';
|
|
|
if (needTime < 1) {
|
|
|
// 小于1小时显示分钟
|
|
|
const minutes = Math.round(needTime * 60);
|
|
|
timeDisplay = `${minutes}-Minutes`;
|
|
|
} else if (needTime === 1) {
|
|
|
timeDisplay = '1-Hour';
|
|
|
} else {
|
|
|
timeDisplay = `${needTime % 1 === 0 ? needTime : needTime.toFixed(1)}-Hours`;
|
|
|
}
|
|
|
|
|
|
// 格式化价格显示
|
|
|
let priceDisplay = 'Price on request';
|
|
|
if (tour.price !== undefined && tour.price !== null && tour.price !== "" && tour.price !== 0) {
|
|
|
const priceNum = typeof tour.price === 'string'
|
|
|
? parseFloat(tour.price.replace(/[^0-9.]/g, ''))
|
|
|
: Number(tour.price);
|
|
|
|
|
|
if (!isNaN(priceNum) && priceNum > 0) {
|
|
|
// 只显示整数部分
|
|
|
priceDisplay = 'US$' + Math.floor(priceNum).toLocaleString('en-US');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const tourHtml = `
|
|
|
<div class="flex-col border-box">
|
|
|
<a href="${tour.url || '#'}" rel="nofollow">
|
|
|
<span class="flag-box"></span>
|
|
|
<img alt="${tour.title || 'Tour image'}" class="img-responsive" src="${tour.pic || ''}">
|
|
|
</a>
|
|
|
<div class="caption">
|
|
|
<h3><a href="${tour.url || '#'}">${tour.title || 'Untitled Tour'}</a></h3>
|
|
|
<ul class="card-ul">
|
|
|
<li class="card-hours">${timeDisplay}</li>
|
|
|
</ul>
|
|
|
<div class="caption-btn">
|
|
|
<p>From <span class="baseprice font24">${priceDisplay}</span></p>
|
|
|
<p><a aria-label="button" class="btn-base" href="${tour.url || '#'}" rel="nofollow">View More</a></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
`;
|
|
|
|
|
|
tourListContainer.insertAdjacentHTML('beforeend', tourHtml);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 初始加载时显示所有旅游项目
|
|
|
filterAndDisplayTours();
|
|
|
});
|
|
|
|
|
|
|
|
|
</script>
|