切换父div的active状态后，如何还原原始图片？

你当前的代码每次点击都会直接把图片替换成data-img里的地址，没有保存原始图片的路径，所以没法实现还原效果。只需要先把原始图片地址存起来，再根据active类的状态切换图片即可，具体修改如下：

修改后的JavaScript代码 #

$('.egg').click(function(){
  var $this = $(this);
  var $img = $this.find(".card-image img");
  
  // 第一次点击时，把原始图片地址存到div的data属性里
  if (!$this.data('original-img')) {
    $this.data('original-img', $img.attr('src'));
  }
  
  $this.toggleClass("active");
  
  // 根据active类的状态切换图片
  if ($this.hasClass("active")) {
    $img.attr("src", $this.data('img'));
  } else {
    $img.attr("src", $this.data('original-img'));
  }
});

代码说明 #

• 用$this缓存当前点击的div对象，减少重复DOM查询，提升性能；
• 第一次点击时，将img的原始地址存入div的data-original-img属性中，后续随时可以调用；
• 切换active类后，判断当前是否存在该类：有则显示data-img的图片，无则还原为原始图片。

你之前添加的return false无效，是因为这个问题和事件冒泡、默认行为无关，核心是缺少还原图片的逻辑和原始地址的存储。

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