JavaScript评论轮播图图片更新失效：变量作用域与命名冲突解析

// 全局变量，引用HTML中的图片元素
const person = document.querySelector("#person-img");
const author = document.querySelector("#author");
const job = document.querySelector("#job");
const info = document.querySelector("#info");

// ... (其他代码，如 reviews 数组，按钮事件监听器)

function showPerson(person) { // 注意这里的参数名也是 'person'
  const item = reviews[person]; // 这里的 'person' 是传入的数字索引
  person.src = item.img; // 问题所在：这里的 'person' 仍然是参数，一个数字！
  author.innerHTML = item.name;
  job.innerHTML = item.job;
  info.innerHTML = item.text;
}

// 示例调用
nextBtn.addEventListener("click", function() {
  number++;
  // ... (边界检查)
  showPerson(number); // 传入的是一个数字，表示 reviews 数组的索引
});

// 全局变量，引用HTML中的图片元素
const person = document.querySelector("#person-img"); // 这是一个 <img> 元素
const author = document.querySelector("#author");
const job = document.querySelector("#job");
const info = document.querySelector("#info");

// ... (其他代码)

// 修正后的 showPerson 函数
function showPerson(index) { // 参数名改为 'index'
  const item = reviews[index]; // 使用参数 'index' 获取评论数据
  person.src = item.img; // 这里的 'person' 现在正确地引用了全局的 <img> 元素
  author.innerHTML = item.name;
  job.innerHTML = item.job;
  info.innerHTML = item.text;
}

// 初始化时显示第一个评论
window.addEventListener('DOMContentLoaded', function() {
  showPerson(number); // 调用时传入当前索引
});

// 按钮事件监听器调用
nextBtn.addEventListener("click", function() {
  number++;
  if(number > reviews.length - 1) {
    number = 0;
  }
  showPerson(number); // 传入索引
});

prevBtn.addEventListener("click", function() {
  number--;
  if(number < 0) {
    number = reviews.length - 1;
  }
  showPerson(number); // 传入索引
});

randomBtn.addEventListener("click", function() {
  number = Math.floor(Math.random() * reviews.length);
  showPerson(number); // 传入索引
});

// local reviews data
const reviews = [
  {
    id: 1,
    name: "susan smith",
    job: "web developer",
    img:
      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg",
    text:
      "I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry",
  },
  {
    id: 2,
    name: "anna johnson",
    job: "web designer",
    img:
      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg",
    text:
      "Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion axe.photo booth jean shorts artisan narwhal.",
  },
  {
    id: 3,
    name: "peter jones",
    job: "intern",
    img:
      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg",
    text:
      "Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed 8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst raclette post-ironic jianbing swag.",
  },
  {
    id: 4,
    name: "bill anderson",
    job: "the boss",
    img:
      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg",
    text:
      "Edison bulb put a bird on it humblebrag, marfa pok pok heirloom fashion axe cray stumptown venmo actually seitan. VHS farm-to-table schlitz, edison bulb pop-up 3 wolf moon tote bag street art shabby chic. ",
  },
];

// 选中DOM元素
const person = document.querySelector("#person-img"); // 全局的 <img> 元素
const author = document.querySelector("#author");
const job = document.querySelector("#job");
const info = document.querySelector("#info");

const prevBtn = document.querySelector(".prev-btn");
const nextBtn = document.querySelector(".next-btn");
const randomBtn = document.querySelector(".randomBtn");

// 设置初始值
let number = 0;

// 页面加载完成后，显示第一个评论
window.addEventListener('DOMContentLoaded', function() {
  showPerson(number);
});

// 根据给定的索引显示评论信息
function showPerson(index) { // 参数名改为 'index'
  const item = reviews[index]; // 使用 'index' 从 reviews 数组中获取数据
  person.src = item.img; // 'person' 现在引用的是全局的 <img> 元素
  author.innerHTML = item.name;
  job.innerHTML = item.job;
  info.innerHTML = item.text;
}

// 显示下一个评论
nextBtn.addEventListener("click", function() {
  number++;
  if(number > reviews.length - 1) {
    number = 0; // 循环到第一个
  }
  showPerson(number);
});

// 显示上一个评论
prevBtn.addEventListener("click", function() {
  number--;
  if(number < 0) {
    number = reviews.length - 1; // 循环到最后一个
  }
  showPerson(number);
});

// 显示随机评论
randomBtn.addEventListener("click", function() {
  number = Math.floor(Math.random() * reviews.length);
  showPerson(number);
});