如何基于用户输入的星级评分将匹配酒店结果展示到HTML页面？

没问题！我来帮你搞定这个需求——根据用户选的星级评分，把匹配的酒店展示到HTML页面上。咱们一步步来实现：

1. 先搭好HTML基础结构 #

首先需要一个让用户选择星级的控件，再加个展示结果的区域。用下拉选框+按钮的组合比较直观，我还加了点基础样式让页面更清爽：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>酒店筛选</title>
    <style>
        .hotel-card {
            border: 1px solid #eee;
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .filter-section {
            margin: 20px 0;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 8px;
        }
        .hotel-card h3 {
            margin-top: 0;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <div class="filter-section">
        <label for="star-filter">选择星级：</label>
        <select id="star-filter">
            <option value="">所有星级</option>
            <option value="5">5星</option>
            <option value="4">4星</option>
            <option value="3">3星</option>
            <option value="2">2星</option>
            <option value="1">1星</option>
        </select>
        <button id="filter-btn">筛选酒店</button>
    </div>

    <!-- 用来展示筛选结果的容器 -->
    <div id="hotel-results"></div>

    <!-- JavaScript代码区域 -->
    <script>
        // 保留你原有的Hotel类和酒店数据
        class Hotel {
            constructor(name, stars, distance, wifi, pool, price) {
                this.name = name;
                this.stars = stars;
                this.distance = distance;
                this.wifi = wifi;
                this.pool = pool;
                this.price = price;
            }
        }
        var hotels = [];
        hotels.push(new Hotel("The Grand", "5", "0.5", "yes", "no", "190"));
        hotels.push(new Hotel("The Plaza", "4", "1", "yes", "yes", "70"));
        // 额外加两个示例酒店方便测试
        hotels.push(new Hotel("Sunny Inn", "3", "2", "yes", "no", "45"));
        hotels.push(new Hotel("Budget Stay", "2", "3", "no", "no", "25"));

        // 获取页面DOM元素
        const starFilter = document.getElementById('star-filter');
        const filterBtn = document.getElementById('filter-btn');
        const resultsContainer = document.getElementById('hotel-results');

        // 把酒店数据渲染成HTML卡片的函数
        function renderHotels(filteredHotels) {
            // 先清空之前的结果
            resultsContainer.innerHTML = '';
            
            if (filteredHotels.length === 0) {
                resultsContainer.innerHTML = '<p style="color:#e74c3c;">没有找到匹配星级的酒店</p>';
                return;
            }

            // 遍历筛选后的酒店，生成卡片元素
            filteredHotels.forEach(hotel => {
                const hotelCard = document.createElement('div');
                hotelCard.className = 'hotel-card';
                hotelCard.innerHTML = `
                    <h3>${hotel.name}</h3>
                    <p>⭐ ${hotel.stars}星级</p>
                    <p>距离市中心：${hotel.distance}公里</p>
                    <p>WiFi：${hotel.wifi === 'yes' ? '✅ 提供' : '❌ 不提供'}</p>
                    <p>泳池：${hotel.pool === 'yes' ? '✅ 有' : '❌ 无'}</p>
                    <p style="font-weight:bold;">价格：$${hotel.price}/晚</p>
                `;
                resultsContainer.appendChild(hotelCard);
            });
        }

        // 根据星级筛选酒店的函数
        function filterHotelsByStar() {
            const selectedStar = starFilter.value;
            let filteredHotels;

            if (selectedStar === '') {
                // 选择"所有星级"时展示全部酒店
                filteredHotels = hotels;
            } else {
                // 用filter方法筛选出星级匹配的酒店
                filteredHotels = hotels.filter(hotel => hotel.stars === selectedStar);
            }

            // 调用渲染函数展示结果
            renderHotels(filteredHotels);
        }

        // 给筛选按钮绑定点击事件
        filterBtn.addEventListener('click', filterHotelsByStar);

        // 页面加载完成时默认展示所有酒店
        window.addEventListener('load', () => {
            renderHotels(hotels);
        });
    </script>
</body>
</html>

2. 代码逻辑说明 #

• HTML部分：做了一个筛选栏（包含星级下拉框和筛选按钮），还有空的结果容器。加了简单的CSS样式，让酒店卡片看起来更整洁。
• JavaScript部分：
  1. 保留了你原有的Hotel类和酒店数据，额外补充了两个示例酒店方便测试。
  2. renderHotels函数负责把酒店数据转换成可视化的HTML卡片，没有匹配结果时会显示提示文字。
  3. filterHotelsByStar函数根据用户选择的星级，用数组的filter方法筛选出匹配的酒店，再调用渲染函数展示。
  4. 给筛选按钮绑定了点击事件，用户点击后触发筛选；页面加载完成时会默认展示所有酒店。

3. 可选优化：实时筛选 #

如果你不想让用户点击按钮，而是选完星级自动更新结果，可以把按钮去掉，改成监听下拉框的change事件：

// 替换原来的按钮点击事件，改成监听下拉框变化
starFilter.addEventListener('change', filterHotelsByStar);

这样用户切换星级选项时，页面会自动刷新结果，体验更流畅~

内容的提问来源于stack exchange，提问作者user9575743