点击获取元素ID并激活对应兄弟元素——JS与Django问题

我明白你现在卡在哪了——点击任意理发师的左右箭头，所有理发师的图片滑块都会一起切换，这是因为当前的JS代码是全局绑定的，没有区分每个理发师的独立滑块实例。咱们一步步来解决这个问题：

1. 先修正HTML里的重复ID问题 #

你现在给同一个理发师的所有slide用了相同的id="slide-{{BarberProfile.id}}"，但HTML里ID必须是唯一的，这会导致JS无法准确识别对应的图片。另外，给每个理发师的整个区域加一个带唯一标识的容器，方便后续JS定位元素。

修改后的profile.html核心部分：

{% for BarberProfile in queryset_list %}
<!-- 给每个理发师的容器加唯一的data属性 -->
<div class="barber-profile-container" data-barber-id="{{BarberProfile.id}}">
  <!-- 箭头区域 -->
  <div style="width:50%;position:absolute;left: 50%;transform: translateX(-50%);z-index:1;pointer-events: none">
    <div style="padding-top: 100%;">
      <img class="arrow-left" data-barber-id="{{BarberProfile.id}}" style="pointer-events: auto;" src="{% static \"img/arrow-2.svg\" %}" alt="Left arrow">
      <img class="arrow-right" data-barber-id="{{BarberProfile.id}}" style="pointer-events: auto;" src="{% static \"img/arrow-2.svg\" %}" alt="Right arrow">
    </div>
  </div>

  <a class="profile-div" id="barber-{{BarberProfile.id}}" target="{{BarberProfile.booking_link}}" onClick="toggle_content(this.id)">
    <!-- 滑块图片：去掉重复ID，用class + data属性关联理发师 -->
    <div class="image slide border-radius-2 shadow" data-barber-id="{{BarberProfile.id}}" style="background-image: url({{BarberProfile.image.url}})">
      <div class="image-structure"></div>
    </div>
    <div class="image slide border-radius-2 shadow" data-barber-id="{{BarberProfile.id}}" style="background-image: url({{BarberProfile.image_1.url}})">
      <div class="image-structure"></div>
    </div>
    <div class="image slide border-radius-2 shadow" data-barber-id="{{BarberProfile.id}}" style="background-image: url({{BarberProfile.image_2.url}})">
      <div class="image-structure"></div>
    </div>

    <!-- 理发师信息部分保持不变 -->
    <h4 class="color-1 margin-top-2-lh margin-bottom-2-lh">{{BarberProfile.first_name}} {{BarberProfile.last_name}}</h4>
    <p class="color-4">{{BarberProfile.bio}}</p>
    <!-- ... 其他经验、服务类型等内容 ... -->
  </a>
</div>
{% endfor %}

注意：我把重复的id="image-structure"改成了class，同时修正了<a>标签里的ID格式错误（原来的ID带空格是无效的）。

2. 重构JavaScript代码，为每个理发师创建独立滑块逻辑 #

原来的JS用了全局的current变量，所有滑块共享这个状态，所以点击箭头时会一起动。现在我们为每个理发师单独维护滑块状态，用data-barber-id来关联对应的元素。

修改后的profile.js：

// 存储每个理发师的当前滑块索引，key是理发师ID，value是当前显示的图片下标
const barberSliderStates = {};

// 初始化单个理发师的滑块
function initSingleBarberSlider(container) {
  const barberId = container.dataset.barberId;
  // 获取当前理发师的所有滑块图片
  const sliderImages = container.querySelectorAll('.slide');
  // 获取当前理发师的左右箭头
  const arrowLeft = container.querySelector('.arrow-left');
  const arrowRight = container.querySelector('.arrow-right');

  // 初始化当前索引为0
  barberSliderStates[barberId] = 0;

  // 重置当前理发师的所有图片为隐藏
  function reset() {
    sliderImages.forEach(img => img.style.display = 'none');
  }

  // 初始化显示第一张图片
  function startSlide() {
    reset();
    sliderImages[0].style.display = 'block';
  }

  // 切换到上一张
  function slideLeft() {
    reset();
    barberSliderStates[barberId]--;
    // 边界处理：如果到了第一张，跳转到最后一张
    if (barberSliderStates[barberId] < 0) {
      barberSliderStates[barberId] = sliderImages.length - 1;
    }
    sliderImages[barberSliderStates[barberId]].style.display = 'block';
  }

  // 切换到下一张
  function slideRight() {
    reset();
    barberSliderStates[barberId]++;
    // 边界处理：如果到了最后一张，跳转到第一张
    if (barberSliderStates[barberId] >= sliderImages.length) {
      barberSliderStates[barberId] = 0;
    }
    sliderImages[barberSliderStates[barberId]].style.display = 'block';
  }

  // 给当前理发师的箭头绑定点击事件
  arrowLeft.addEventListener('click', slideLeft);
  arrowRight.addEventListener('click', slideRight);

  // 启动当前滑块
  startSlide();
}

// 页面加载完成后，初始化所有理发师的滑块
document.addEventListener('DOMContentLoaded', function() {
  const barberContainers = document.querySelectorAll('.barber-profile-container');
  barberContainers.forEach(initSingleBarberSlider);
});

3. 关键逻辑说明 #

• 独立状态管理：用barberSliderStates对象存储每个理发师的当前滑块索引，确保每个滑块的状态互不干扰。
• 元素定位：通过barber-profile-container容器来获取对应理发师的箭头和图片，避免全局查询导致的元素混淆。
• 边界处理：在切换图片时做了边界判断，确保索引超出范围时能循环回到正确的图片。

这样修改后，点击某个理发师的箭头时，只会触发该理发师对应的图片滑块切换，不会影响其他理发师的滑块了。

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