本文详解 jquery 中 `if-else` 判断逻辑的常见误区，重点解决因选择器范围过大（如 `$(".year").hasclass("year2")`）导致条件恒真、`else if` 失效的问题，并提供健壮的拖拽响应式类添加与弹窗联动方案。
在您的代码中，核心问题出在 touchend 事件处理函数里的判断逻辑：
if ($(".year").hasClass("year2")) {
$(".year2").addClass("drop");
} else if ($(".year").hasClass("year58")) {
$(".year58").addClass("drop");
}这段代码看似合理，实则存在根本性逻辑缺陷：$(".year") 选取的是所有带有 year 类的
元素（共 6 个），而其中必然包含 .year2（因为 HTML 中明确写了 ）。因此 $(".year").hasClass("year2") 永远返回 true —— jQuery 的 hasClass() 在集合中只要有一个元素匹配即返回 true，它不关心“当前操作对象”是谁。结果是：else if 永远不会执行，.year58 永远无法获得 drop 类。
✅ 正确做法是：精准定位被拖拽影响的目标元素。通常需结合拖拽交互状态（例如记录最后一次进入/停留的 .year 元素），而非静态检查整个集合。
以下是推荐的改进方案（无需第三方库，纯 jQuery 实现）：
立即学习“前端免费学习笔记（深入）”；
✅ 方案一：基于 dragenter / dragover + 状态标记（推荐）
let activeYear = null;
// 监听所有 .year 区域的拖入事件
$(".year").on("dragenter dragover", function(e) {
e.preventDefault(); // 允许放置
activeYear = $(this).attr("class").match(/year\d+/)?.[0] || null;
});
// 触发 drop 逻辑（此处用 touchend 模拟，实际建议用 drop 事件）
$(".btn-draggable-ball").on("touchend", function(e) {
e.preventDefault();
if (activeYear === "year2") {
$(".year2").addClass("drop");
} else if (activeYear === "year58") {
$(".year58").addClass("drop");
}
// 重置状态，避免残留
activeYear = null;
});? 提示：若使用原生 HTML5 拖放 API，应监听 drop 事件而非 touchend；移动端可配合 touchstart + touchmove 模拟拖拽轨迹，但上述 dragenter 方案在支持触摸的现代浏览器中亦可通过 touch-action: manipulation 启用。
✅ 方案二：点击触发时反向查找（轻量替代）
若暂不实现完整拖拽检测，可改为点击 .btn-draggable-ball 后，检查其最近的 .year 父容器或相邻元素（需 HTML 结构支持）：
$(".btn-draggable-ball").on("click", function(e) {
e.preventDefault();
// 假设拖拽球位于 .drag-area 内，且用户意图是“投放到最近的 .year”
const $closestYear = $(this).closest(".drag-area").find(".year.drop").last();
if ($closestYear.hasClass("year2")) {
$(".year2").addClass("drop");
} else if ($closestYear.hasClass("year58")) {
$(".year58").addClass("drop");
}
});⚠️ 其他关键注意事项
-
ID 重复问题：您的 HTML 中两个弹窗都使用了 id="popup" 和 id="close"，这是非法的 DOM 结构（ID 必须唯一）。请改为：
...... -
弹窗显示逻辑优化：当前 $(".popup-1").show() 在无 .drop 类时不会触发，但建议增加兜底反馈：
$(".btn-popup").on("click", () => { if ($(".year2").hasClass("drop")) { $("#popup-1").show(); $("#popup-2").hide(); // 隐藏另一个，避免重叠 } else if ($(".year58").hasClass("drop")) { $("#popup-2").show(); $("#popup-1").hide(); } else { alert("请先将球拖至指定年份区域！"); } }); -
CSS 建议：为 .drop 类添加视觉反馈，例如：
.year.drop { border: 2px solid #4CAF50; background-color: #f1f8e9; }
通过精准定位目标元素、避免宽泛集合判断、修正 DOM 唯一性约束，即可彻底解决 if-else 失效问题，实现“拖到 year2 → 显示 popup-1，拖到 year58 → 显示 popup-2”的预期交互。
