能否在<li>标签间显示值可动态变化的JavaScript变量？

嘿，作为JavaScript初学者能折腾Google Places API已经超棒啦！我来帮你捋捋怎么更优雅地处理这些评分展示的问题～

1. 先把平均评分计算逻辑抽成通用函数 #

你的gymCallback是用来算区域内健身房平均评分的对吧？咱们可以把这个计算逻辑单独拎出来做成通用函数，不管是健身房、餐厅还是其他类别都能复用，避免写重复代码：

// 通用计算平均评分的工具函数
function calculateAverageRating(placesResults) {
  // 先处理没有搜索结果的情况
  if (!placesResults || placesResults.length === 0) return 'N/A';
  
  // 过滤掉没有评分的地点，避免拉低平均值
  const ratedPlaces = placesResults.filter(place => place.rating);
  if (ratedPlaces.length === 0) return '无评分数据';
  
  // 计算总分再求平均，保留1位小数更直观
  const totalRating = ratedPlaces.reduce((sum, place) => sum + place.rating, 0);
  return (totalRating / ratedPlaces.length).toFixed(1);
}

之后在你的回调里调用就很清爽了：

function gymCallback(results2, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    const avgGymRating = calculateAverageRating(results2);
    // 把结果更新到对应展示区域
    document.getElementById('gym-rating').textContent = avgGymRating;
  } else {
    document.getElementById('gym-rating').textContent = '无法获取数据';
  }
}

2. 搜索新地点时的状态管理 #

每次用户搜新地点，记得先重置展示内容，避免旧数据残留，还能给用户加载反馈：

// 假设你的5个评分展示元素id分别是这些
const ratingElementIds = ['gym-rating', 'restaurant-rating', 'cafe-rating', 'park-rating', 'store-rating'];

// 重置所有评分展示为加载状态
function resetRatingDisplays() {
  ratingElementIds.forEach(id => {
    document.getElementById(id).textContent = '加载中...';
  });
}

// 发起新搜索前调用这个函数
resetRatingDisplays();
// 再去调用各个类别的Places API请求

3. 优化展示的小细节（提升用户体验） #

• 别用输入框展示静态信息：输入框是给用户输入用的，改成<span>或者<p>标签更合理，还能避免用户误编辑：

<!-- 原来的输入框可以替换成这样 -->
<div class="rating-item">
  <span>健身房平均评分：</span>
  <span id="gym-rating">--</span>
</div>

• 给评分加视觉反馈：用颜色区分高低分，用户一眼就能get评分水平：

function getRatingColor(ratingText) {
  if (ratingText.includes('N/A') || ratingText.includes('无')) return '#999';
  const rating = parseFloat(ratingText);
  if (rating >= 4.5) return '#27ae60'; // 高分绿色
  if (rating >= 3.5) return '#f39c12'; // 中等黄色
  return '#e74c3c'; // 低分红色
}

// 更新评分时顺便设置颜色
const gymRatingEl = document.getElementById('gym-rating');
gymRatingEl.textContent = avgGymRating;
gymRatingEl.style.color = getRatingColor(avgGymRating);

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