information-system/application/views/mobile_first/shanghai-tour-list.php

<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’an</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>