如何使用JS/JQ实现图片显示/隐藏的切换功能

嘿，先帮你指出现有代码里的小问题：你在点击#jad按钮时错误操作了按钮自身的src属性，但实际上你要控制的是图片#obj-2的显示/隐藏状态。下面是针对需求的最优实现方案，以及jQuery和纯JS实现的差异分析：

jQuery 最优实现方案 #

jQuery封装了大量便捷的DOM操作方法，针对这个需求，有几种高效的实现方式：

方案1：使用toggle()方法（最简洁推荐） #

toggle()方法会自动切换元素的显示状态（显示→隐藏，隐藏→显示），完全贴合你的需求，代码极简：

$(document).ready(function() {
  // 给jad按钮绑定点击事件，切换图片显示状态
  $("#jad").click(function(){
    $("#obj-2").toggle();
  });
  
  // 如果其他按钮也要控制同一张图片，直接复制逻辑即可
  $("#hecho").click(function(){
    $("#obj-2").toggle();
  });
  
  $("#mewto").click(function(){
    $("#obj-2").toggle();
  });
});

方案2：手动切换display属性（灵活可控） #

如果你需要更精细的控制（比如自定义隐藏时的显示方式），可以直接操作元素的display属性：

$(document).ready(function() {
  $("#jad").click(function(){
    const targetImg = $("#obj-2");
    // 判断当前显示状态，手动切换
    if (targetImg.css("display") === "none") {
      targetImg.css("display", "block");
    } else {
      targetImg.css("display", "none");
    }
  });
});

方案3：切换CSS类（适合复杂样式场景） #

如果隐藏/显示需要伴随其他样式变化（比如过渡动画、透明度调整），定义CSS类再用toggleClass()切换是更优的选择：

/* 在css/style.css中添加 */
.img-hidden {
  display: none;
  /* 可扩展其他样式，比如：transition: opacity 0.3s; opacity: 0; */
}

$(document).ready(function() {
  $("#jad").click(function(){
    $("#obj-2").toggleClass("img-hidden");
  });
});

纯JavaScript实现的差异 #

纯JS实现的核心逻辑和jQuery一致，但因为没有封装层，写法会更繁琐，同时也有一些特性差异：

纯JS实现切换逻辑 #

对应上面jQuery的toggle()方案，纯JS的实现如下：

// 等待DOM加载完成
document.addEventListener("DOMContentLoaded", function() {
  const jadBtn = document.getElementById("jad");
  const targetImg = document.getElementById("obj-2");
  
  jadBtn.addEventListener("click", function() {
    // 判断当前显示状态并切换
    if (targetImg.style.display === "none") {
      targetImg.style.display = "block";
    } else {
      targetImg.style.display = "none";
    }
  });
  
  // 其他按钮绑定同理
  const hechoBtn = document.getElementById("hecho");
  hechoBtn.addEventListener("click", function() {
    targetImg.style.display = targetImg.style.display === "none" ? "block" : "none";
  });
});

jQuery vs 纯JS的核心差异 #

• 代码简洁度：jQuery用链式调用和封装方法（比如click()、toggle()）大幅减少代码量，纯JS需要手动获取DOM元素、绑定事件、判断状态，代码更冗长。
• 兼容性：jQuery自动处理了不同浏览器的DOM API差异（比如旧IE的attachEvent vs 标准addEventListener），纯JS如果要兼容旧浏览器，需要自己做兼容处理。
• 功能扩展：jQuery提供了很多开箱即用的扩展功能（比如fadeToggle()实现淡入淡出动画），纯JS需要自己实现这些效果，或者依赖原生API的新特性（比如classList.toggle()）。
• 性能：现代浏览器中，纯JS原生DOM操作的性能略高于jQuery（因为少了一层封装开销），但在大多数业务场景下，这种差异几乎可以忽略。

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