< div class = "filter-box" >
< div class = "filter-left" >
< div class = "filter-item" >
< div class = "filter-nav" > Category< / div >
< div class = "filter-popup" >
< p class = "popup-title" > Tours< / p >
< ul id = "category-list" >
<?php foreach ( $lineTypeList 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-category" > < strong > Clear< / strong > < / a >
< a href = "#" class = "btn-base" > See < span id = "category-count" > 0< / span > results< / a >
< / div >
< / div >
< / div >
< div class = "filter-item" >
< div class = "filter-nav" > Days< / div >
< div class = "filter-popup" >
< p class = "popup-title" > Tours< / p >
< ul id = "days-list" >
< li > < a href = "javascript:;" data-day = "1" > 1 Days< / a > < / li >
< li > < a href = "javascript:;" data-day = "2-3" > 2-3 Days< / a > < / li >
< li > < a href = "javascript:;" data-day = "4-6" > 4-6 Days< / a > < / li >
< li > < a href = "javascript:;" data-day = "7-9" > 7-9 Days< / a > < / li >
< li > < a href = "javascript:;" data-day = "10-20" > 10 or more Days< / a > < / li >
< / ul >
< div class = "popup-bottom" >
< a href = "javascript:;" class = "clearbtn" id = "clear-days" > < strong > Clear< / strong > < / a >
< a href = "#" class = "btn-base" > See < span id = "days-count" > 0< / span > results< / 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-day" > 15-Day< / li >
< li > Xi’ < / li >
< li > Guilin< / li >
< li > Yangshuo< / li >
< li > Shanghai< / 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 >
document.addEventListener('DOMContentLoaded', function() {
var TourData = <?php echo json_encode ( $tourListData , JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ); ?> ;
// 如果$tourListData可能为null，
TourData = TourData || [];
// 获取DOM元素
const tourListContainer = document.getElementById('js_tourlist');
const allCountSpan = document.getElementById('all-count');
// 为分类和天数添加点击事件
setupFilterList('category-list', 'clear-category', 'category-count');
setupFilterList('days-list', 'clear-days', 'days-count');
// 通用函数：设置筛选列表的点击和清除功能
function setupFilterList(listId, clearBtnId, countSpanId) {
const list = document.getElementById(listId);
const clearBtn = document.getElementById(clearBtnId);
const countSpan = document.getElementById(countSpanId);
// 点击列表项
list.addEventListener('click', function(e) {
const target = e.target.closest('li');
if (target & & e.target.tagName === 'A') {
target.classList.toggle('active');
updateSelectedCount();
filterAndDisplayTours();
}
});
// 清除按钮
clearBtn.addEventListener('click', function() {
const activeItems = list.querySelectorAll('.active');
activeItems.forEach(item => {
item.classList.remove('active');
});
updateSelectedCount();
filterAndDisplayTours();
});
// 更新选中数量
function updateSelectedCount() {
const count = list.querySelectorAll('.active').length;
countSpan.textContent = count;
}
}
// 筛选并显示旅游项目
function filterAndDisplayTours() {
// 获取选中的分类
const selectedCategories = [];
document.querySelectorAll('#category-list li.active a').forEach(a => {
selectedCategories.push(a.getAttribute('data-id'));
});
// 获取选中的天数范围
const selectedDayRanges = [];
document.querySelectorAll('#days-list li.active a').forEach(a => {
selectedDayRanges.push(a.getAttribute('data-day'));
});
// 筛选旅游数据
const filteredTours = TourData.filter(tour => {
// 检查分类
const categoryMatch = selectedCategories.length === 0 ||
(typeof tour.linetype === 'string'
? selectedCategories.some(cat => tour.linetype.split(',').includes(cat))
: selectedCategories.includes(tour.linetype.toString()));
// 检查天数
const dayMatch = selectedDayRanges.length === 0 ||
selectedDayRanges.some(range => {
if (range.includes('-')) {
const [min, max] = range.split('-').map(Number);
return tour.Days >= min & & tour.Days < = max;
}
return tour.Days === Number(range);
});
return categoryMatch & & dayMatch;
});
// 更新计数
document.getElementById('category-count').textContent = selectedCategories.length;
document.getElementById('days-count').textContent = selectedDayRanges.length;
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 cities = tour.PassCity.split(',').map(city => city.trim());
const tourHtml = `
< div class = "flex-col border-box" >
< a href = "${tour.url}" rel = "nofollow" >
< span class = "flag-box" > < / span >
< img alt = "${tour.title}" class = "img-responsive" src = "${tour.pic}" >
< / a >
< div class = "caption" >
< h3 > < a href = "${tour.url}" > ${tour.title}< / a > < / h3 >
< ul class = "card-ul" >
< li class = "card-day" > ${tour.Days}-Day< / li >
${cities.map(city => `< li > ${city}< / li > `).join('')}
< / ul >
< div class = "caption-btn" >
< p > From < span class = "baseprice font24" > ${tour.price ? 'US$' + tour.price : 'Price on request'}< / 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 >
