< 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 >
