如何使用同一个点击事件触发fadeIn与fadeOut切换效果？

嗨，我来帮你把两个分开的点击事件整合到一起，实现用同一个逻辑触发淡入和淡出效果！

核心思路：利用jQuery的fadeToggle()方法 #

jQuery的fadeToggle()方法本身就是为这种“切换显示/隐藏”场景设计的——它会自动检测目标元素的可见状态：如果元素是隐藏的，就执行淡入；如果已经显示，就执行淡出。完美匹配你的需求！

整合后的代码实现 #

我们可以写一个通用的事件处理函数，同时绑定到你的$person元素和“x”按钮上，这样不管点击哪个，都能统一处理切换逻辑：

// 通用的切换处理函数
function togglePersonData(e) {
  // 阻止事件冒泡：避免点击关闭按钮时，同时触发$person的点击事件
  e.stopPropagation();

  // 根据点击的元素，定位到对应的.persondata
  let $targetData;
  if ($(this).hasClass('close')) {
    // 点击的是关闭按钮，找最近的.persondata
    $targetData = $(this).closest('.persondata');
  } else {
    // 点击的是$person元素，找内部的.persondata
    $targetData = $(this).find('.persondata');
  }

  // 执行淡入/淡出切换
  $targetData.fadeToggle('fast', function() {
    // 这里可以写切换完成后的回调逻辑
    // 比如淡出后需要重置的状态等
  });
}

// 把函数绑定到两个触发元素上
$person.on('click', togglePersonData);
$('.close').on('click', togglePersonData);

为什么这样做更优？ #

• 减少代码重复：不用写两个几乎一样的点击事件，维护起来更方便
• 自动状态判断：fadeToggle()帮你省去了手动判断元素可见性的麻烦（你原来代码里的if ($('.persondata:visible'))其实有小问题，因为jQuery对象永远是真值，应该用is(':visible')，而fadeToggle()直接帮你处理了这个逻辑）
• 统一逻辑：所有切换相关的逻辑都在一个函数里，后续要修改动画速度、回调行为，只需要改这一处

额外注意点 #

• 一定要加e.stopPropagation()，不然点击关闭按钮时，事件会向上冒泡到$person元素，导致触发两次切换操作，出现异常行为
• 如果你的DOM结构有变化，调整$targetData的定位逻辑即可，比如如果.persondata是$person的同级元素，就把find()改成siblings()

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