点击按钮无法更新carousel的index值及页面内容问题求助

第一个问题：Index始终为0的原因 #

看你最初的代码，核心bug出在showSlides函数的第一行：

function showSlides(slideCount) {
  index = slideCount; // 这里直接把index强制改成了轮播总数！
  if (index < 0) {
    index = slideCount - 1;
  }
  if (index >= slideCount) {
    index = 0;
  }
}

不管你在geri或ileri里对index做了++/--操作，调用这个函数时都会先把index重置为轮播总数，之后的边界判断又会把它拉回0，等于你的增减操作完全被覆盖了，index自然一直是0。

第二个问题：Index正常变化但页面不更新的原因 #

你修改后的代码里，点击按钮只修改了index的数值，但没有触发页面内容的更新逻辑——也就是没重新调用负责渲染轮播内容的add函数，页面自然不会跟着变化。另外还有个隐藏小问题：add函数每次都会往icon元素里追加新的img标签，多次点击后图标会堆积在页面上，得先清空旧内容再添加新图标。

完整修复代码 #

我把两个问题都修复了，还优化了边界判断逻辑，你可以直接用：

$(document).ready(function () { 
  "use strict"; 
  const carousel_baslik = $(".carousel-baslik")[0]; 
  const carousel_metin = $(".carousel-metin")[0]; 
  const carousel_image = $(".carousel-image")[0]; 
  const counter = $("#counter")[0]; 
  const icon = $("#icon-ground")[0]; 
  const controller1 = $(".carousel-controller")[0]; 
  const controller2 = $(".carousel-controller")[1]; 
  var index = 0;
  let slidesData = []; // 全局存轮播数据，方便点击时直接调用

  class Request { 
    get(url) { 
      return new Promise((resolve, reject) => { 
        fetch(url)
          .then(res => res.json())
          .then(data => {
            slidesData = data; // 把数据保存到全局变量
            resolve(data);
          })
          .catch(err => reject(err)); 
      }) 
    } 
  } 

  const Requesting = new Request(); 
  Requesting.get("js/carousel.json").then(data => { 
    controller1.addEventListener("click", geri); 
    controller2.addEventListener("click", ileri); 
    updateSlide(); // 初始化显示第一个轮播项
  }); 

  // 统一的页面更新函数，替代原来的add
  function updateSlide() {
    const currentSlide = slidesData[index];
    carousel_baslik.textContent = currentSlide.baslik;
    carousel_metin.innerHTML = currentSlide.metin;
    carousel_image.src = currentSlide.image;
    counter.textContent = currentSlide.count;
    
    // 先清空旧图标，再添加新的，避免堆积
    icon.innerHTML = "";
    const img = document.createElement("img"); 
    img.src = currentSlide.icon; 
    img.className = "w-100"; 
    img.alt = ""; 
    icon.appendChild(img); 
  }

  function geri() { 
    index--;
    // 边界判断：index小于0时，跳转到最后一个轮播项
    if (index < 0) {
      index = slidesData.length - 1;
    }
    updateSlide(); // 修改index后立即更新页面
    console.log("当前index:", index);
  } 

  function ileri() { 
    index++;
    // 边界判断：index超出总数时，跳转到第一个轮播项
    if (index >= slidesData.length) {
      index = 0;
    }
    updateSlide(); // 修改index后立即更新页面
    console.log("当前index:", index);
  } 
});

关键改动点说明 #

1. 把轮播数据存为全局变量slidesData，点击按钮时无需重复传递数据，直接调用更新函数即可
2. 将原来的add函数重构为updateSlide，每次更新前先清空icon里的旧图标，避免图标堆积
3. 移除了逻辑错误的showSlides函数，把边界判断直接整合到geri和ileri中，逻辑更直观
4. 每次修改index后，立即调用updateSlide()触发页面内容更新
5. 初始化时调用updateSlide()，确保页面加载时显示第一个轮播项

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