@ -10,25 +10,38 @@
<?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 >
< a href = "javascript:;" class = "clearbtn" id = "clear-category" > < strong > Clear< / strong > < / a >
< / div >
< / div >
< / div >
< div class = "filter-item" >
< div class = "filter-nav" > Days< / div >
< div class = "filter-popup" >
< p class = "popup-title" > Tours < / p >
< p class = "popup-title" > < / 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 D ays< / a > < / li >
< li > < a href = "javascript:;" data-day = "1" > 1-2 Days< / a > < / li >
< li > < a href = "javascript:;" data-day = " 3-3"> 3 Days< / a > < / li >
< li > < a href = "javascript:;" data-day = "4- 4"> 4 Days< / a > < / li >
< li > < a href = "javascript:;" data-day = " 5-7"> 5-7 Days< / a > < / li >
< li > < a href = "javascript:;" data-day = " 8-20"> more than 7 d ays< / 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 >
< a href = "javascript:;" class = "clearbtn" id = "clear-days" > < strong > Clear< / strong > < / a >
< / div >
< / div >
< / div >
< div class = "filter-item" >
< div class = "filter-nav" > Price< / div >
< div class = "filter-popup" >
< p class = "popup-title" > < / p >
< ul id = "price-list" >
< li > < a href = "javascript:;" data-price = "0-299" > < $300< / a > < / li >
< li > < a href = "javascript:;" data-price = "300-500" > $300-$500< / a > < / li >
< li > < a href = "javascript:;" data-price = "501-1000" > $501-$1000< / a > < / li >
< li > < a href = "javascript:;" data-price = "1001-10000" > > $1000< / a > < / li >
< / ul >
< div class = "popup-bottom" >
< a href = "javascript:;" class = "clearbtn" id = "clear-price" > < strong > Clear< / strong > < / a >
< / div >
< / div >
< / div >
@ -56,35 +69,34 @@
< script >
var TourData = <?php echo json_encode ( $tourListData , JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ); ?> ;
// 如果$tourListData可能为null，
TourData = TourData || [];
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');
// 初始化筛选器
setupFilter('category-list', 'clear-category');
setupFilter('days-list', 'clear-days');
setupFilter('price-list', 'clear-price');
// 通用函数：设置筛选列表的点击和清除功能
function setupFilterList (listId, clearBtnId, countSpa nId) {
function setupFilter(listId, clearBtnId) {
const list = document.getElementById(listId);
const clearBtn = document.getElementById(clearBtnId);
const countSpan = document.getElementById(countSpanId);
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');
updateSelectedCount();
filterAndDisplayTours();
}
});
@ -95,15 +107,8 @@ document.addEventListener('DOMContentLoaded', function() {
activeItems.forEach(item => {
item.classList.remove('active');
});
updateSelectedCount();
filterAndDisplayTours();
});
// 更新选中数量
function updateSelectedCount() {
const count = list.querySelectorAll('.active').length;
countSpan.textContent = count;
}
}
// 筛选并显示旅游项目
@ -120,6 +125,12 @@ document.addEventListener('DOMContentLoaded', function() {
selectedDayRanges.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 => {
// 检查分类
@ -131,19 +142,30 @@ document.addEventListener('DOMContentLoaded', function() {
// 检查天数
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);
const [min, max] = range.split('-').map(Number);
return tour.Days >= min & & tour.Days < = 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 categoryMatch & & dayMatch;
return categoryMatch & & dayMatch & & priceMatch ;
});
// 更新计数
document.getElementById('category-count').textContent = selectedCategories.length;
document.getElementById('days-count').textContent = selectedDayRanges.length;
// 更新总计数
allCountSpan.textContent = filteredTours.length;
// 显示筛选结果
@ -163,23 +185,36 @@ document.addEventListener('DOMContentLoaded', function() {
// 遍历并添加每个旅游项目
tours.forEach(tour => {
const cities = tour.PassCity.split(',').map(city => city.trim());
const cities = tour.PassCity ? tour.PassCity.split(',').map(city => city.trim()) : [];
// 格式化价格显示 - 修改后的逻辑
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" >
< a href = "${tour.url || '#' }" rel = "nofollow" >
< span class = "flag-box" > < / span >
< img alt = "${tour.title}" class = "img-responsive" src = "${tour.pic}" >
< img alt = "${tour.title || 'Tour image' }" class = "img-responsive" src = "${tour.pic || '' }">
< / a >
< div class = "caption" >
< h3 > < a href = "${tour.url}" > ${tour.title}< / a > < / h3 >
< h3 > < a href = "${tour.url || '#' }"> ${tour.title || 'Untitled Tour' }< / a > < / h3 >
< ul class = "card-ul" >
< li class = "card-day" > ${tour.Days}-Day< / li >
< li class = "card-day" > ${tour.Days || 'N/A' }-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 >
< 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 >
赵鹏
10 months ago