使用if else语句判断操作：jQuery Draggable点击按钮弹窗失效求助

你的代码无法正常运行的核心问题在于：

• $(".year2").mouseout() 不是判断条件，而是主动触发该元素的mouseout事件，它返回的是jQuery对象，在if语句里会被判定为true，所以永远只会执行第一个弹窗的显示逻辑。
• 没有结合jQuery Draggable的状态来区分目标元素。

正确实现思路（结合Draggable场景） #

通常结合拖拽组件的需求是：拖拽指定元素后，点击按钮显示对应弹窗。我们需要先记录当前被拖拽的元素，再在点击事件中根据记录判断弹窗。

步骤1：初始化Draggable并记录拖拽状态 #

给拖拽元素添加标识（推荐用data-*属性更可靠），并在拖拽开始时记录当前元素：

<!-- 给拖拽元素加data标识 -->
<div class="year2" data-drag-target="year2">拖拽元素1</div>
<div class="year58" data-drag-target="year58">拖拽元素2</div>

// 记录当前被拖拽的元素标识
let currentDragTarget = null;

// 初始化Draggable组件
$(".year2, .year58").draggable({
  start: function() {
    // 存储当前拖拽元素的标识
    currentDragTarget = $(this).data("drag-target");
  }
});

步骤2：修改按钮点击事件逻辑 #

根据记录的拖拽标识判断显示对应弹窗：

$(".btn-popup").on("click", () => {
  if (currentDragTarget === "year2") {
    $(".popup-1").show();
  } else if (currentDragTarget === "year58") {
    $(".popup-2").show();
  } else {
    // 可选：处理未拖拽元素的情况
    alert("请先拖拽对应元素");
  }
});

若需求是判断鼠标是否离开过元素 #

如果你的需求确实是根据鼠标是否离开过.year2/.year58来触发弹窗，需要先通过事件绑定记录状态：

let isYear2MouseOut = false;
let isYear58MouseOut = false;

// 绑定mouseout事件记录状态
$(".year2").mouseout(() => isYear2MouseOut = true);
$(".year58").mouseout(() => isYear58MouseOut = true);

// 点击事件判断状态
$(".btn-popup").on("click", () => {
  if (isYear2MouseOut) {
    $(".popup-1").show();
  } else if (isYear58MouseOut) {
    $(".popup-2").show();
  }
});

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