使用if else语句结合拖拽功能添加class遇问题求助

核心问题拆解 #

1. touchend事件判断逻辑完全错误：$(".year").hasClass("year2")是检查所有.year元素中是否存在带year2类的元素，而year2本身就是.year的子元素，这个判断永远为true，导致else if分支永远不会触发。
2. 缺少拖拽位置关联逻辑：当前代码完全没判断拖拽球到底落在哪个.year元素上，只是硬检查元素是否存在，完全没把拖拽行为和目标元素关联起来。
3. HTML结构问题：存在重复的id="popup"和id="close"，ID在页面中必须唯一，会导致JS选择器失效。

修正后的代码实现 #

修正后的HTML（修复重复ID） #

<!-- draggable -->
<div class="draggable">
  <img src="img/draggable.png" alt="draggable" />
  <div class="drag-area">
    <div class="year year1"></div>
    <div class="year year2"></div>
    <div class="year year3"></div>
    <div class="year year4"></div>
    <div class="year year5"></div>
    <div class="year year58"></div>
    <div class="btn btn-draggable-ball">
      <img src="img/draggable-ball.png" alt="draggable-ball" />
    </div>
  </div>
</div>

<!-- popup -->
<div class="btn btn-popup" id="btn-popup"></div>
<div class="popup-1" id="popup-1" style="z-index: 50; display:none;">
  <div class="answer-1"></div>
  <div class="answer-2"></div>
  <div class="btn close-btn" data-target="popup-1"></div>
</div>
<div class="popup-2" id="popup-2" style="z-index: 50; display:none;">
  <div class="answer-2-2"></div>
  <div class="btn close-btn" data-target="popup-2"></div>
</div>

修正后的JS（实现拖拽位置检测+逻辑修复） #

// 拖拽状态与元素缓存
let isDragging = false;
const dragBall = $(".btn-draggable-ball");
const yearElements = $(".year");

// 触摸开始：标记拖拽状态
dragBall.on("touchstart", (e) => {
  isDragging = true;
  e.preventDefault();
});

// 触摸移动：实时更新拖拽球位置
dragBall.on("touchmove", (e) => {
  if (!isDragging) return;
  const touch = e.originalEvent.touches[0];
  dragBall.css({
    position: "absolute",
    left: touch.clientX - dragBall.width()/2,
    top: touch.clientY - dragBall.height()/2
  });
  e.preventDefault();
});

// 触摸结束：判断拖拽球落在哪个.year元素上
dragBall.on("touchend", (e) => {
  isDragging = false;
  e.preventDefault();
  
  // 先清空所有已添加的drop类
  yearElements.removeClass("drop");
  
  // 获取拖拽球的位置与尺寸
  const ballRect = dragBall[0].getBoundingClientRect();
  
  // 遍历所有.year元素，判断是否与拖拽球重叠
  yearElements.each(function() {
    const yearRect = this.getBoundingClientRect();
    // 矩形重叠判断逻辑
    const isOverlap = !(
      ballRect.right < yearRect.left ||
      ballRect.left > yearRect.right ||
      ballRect.bottom < yearRect.top ||
      ballRect.top > yearRect.bottom
    );
    
    if (isOverlap) {
      $(this).addClass("drop");
    }
  });
});

// 弹窗触发逻辑
$("#btn-popup").on("click", () => {
  if ($(".year2").hasClass("drop")) {
    $("#popup-1").show();
  } else if ($(".year58").hasClass("drop")) {
    $("#popup-2").show();
  }
});

// 关闭弹窗逻辑（复用事件）
$(".close-btn").on("click", function() {
  const targetPopup = $(this).data("target");
  $("#" + targetPopup).hide();
});

关键修正点说明 #

1. 拖拽位置关联：通过getBoundingClientRect()获取元素的位置和尺寸，判断拖拽球与.year元素是否重叠，这才是把拖拽行为和目标元素绑定的核心逻辑。
2. 修复判断逻辑：移除了错误的$(".year").hasClass()判断，改为基于位置重叠的动态检测，确保只有被拖拽球覆盖的元素才会添加drop类。
3. 修复重复ID：将重复的弹窗ID改为唯一值，关闭按钮改用data-target属性关联弹窗，避免ID冲突导致的JS失效。
4. 完善拖拽功能：补充了touchstart和touchmove事件，实现完整的拖拽交互，之前的代码只有touchend，根本没实现拖拽动作。

内容的提问来源于stack exchange，提问作者n.goat_