如何在JavaScript中实现点击按钮按影片时长筛选JSON数组

步骤说明 #

1. 在页面中添加一个用于展示筛选结果的容器
2. 给所有时长按钮绑定点击事件，点击时获取按钮对应的时长文本
3. 从影片数据中筛选出时长匹配的条目
4. 将筛选结果渲染到页面上

完整代码示例 #

HTML部分（补充结果容器）

<button class="movieLength">1 hours</button>
<button class="movieLength">2 hours</button>
<!-- 用于展示筛选结果的容器 -->
<div id="movieResult"></div>

JavaScript部分

const data = [
  {"id": 1,"movie_name": "last holidy","date": "2023-10-29","length": ["1 hour 30"]},
  {"id": 2,"movie_name": "pitch perfect","date": "2023-04-24","length": ["2 hours"]}
];

// 获取所有时长按钮和结果容器
const lengthButtons = document.querySelectorAll('.movieLength');
const resultContainer = document.getElementById('movieResult');

// 给每个按钮绑定点击事件
lengthButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 获取当前按钮的时长文本
    const targetLength = this.textContent.trim();
    
    // 筛选匹配的影片：考虑按钮与数据的格式差异，用小时数做模糊匹配
    const filteredMovies = data.filter(item => {
      const buttonHour = targetLength.split(' ')[0];
      const movieHour = item.length[0].split(' ')[0];
      return buttonHour === movieHour;
    });
    
    // 渲染筛选结果到页面
    renderResult(filteredMovies);
  });
});

// 渲染结果的函数
function renderResult(movies) {
  if (movies.length === 0) {
    resultContainer.innerHTML = '<p>没有找到匹配时长的影片</p>';
    return;
  }
  
  // 生成影片列表HTML
  const movieList = movies.map(movie => `
    <div class="movie-item">
      <h3>${movie.movie_name}</h3>
      <p>上映日期：${movie.date}</p>
      <p>时长：${movie.length.join(', ')}</p>
    </div>
  `).join('');
  
  resultContainer.innerHTML = movieList;
}

关键细节说明 #

• 针对按钮文本和数据里的时长格式差异（按钮是1 hours，数据里第一个影片是1 hour 30），代码用了模糊匹配逻辑，只对比小时数部分；如果需要严格匹配，直接替换为return item.length.includes(targetLength)即可
• 渲染函数负责把筛选后的影片数据转换成可展示的HTML结构，逻辑清晰易维护
• 通过forEach遍历所有按钮，确保每个按钮都能响应点击事件

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