如何用JavaScript/jQuery实现图片点击切换显示对应图片的功能？

没问题，我来帮你搞定这个点击切换的逻辑！其实思路很清晰，我们只需要给每个可点击的方形图片绑定点击事件，然后根据点击的目标来切换显示对应的TV图或者手机图就行。下面是具体的实现步骤和代码：

第一步：调整HTML结构（需要你配合补充） #

首先，我们需要给可点击的图片和要显示的大图加上标识，方便JS获取元素：

<!-- 横向排列的方形图片容器 -->
<div class="product-contents">
  <!-- 除了Cloud Based的其他图片，绑定TV目标 -->
  <img src="franchise-hub.jpg" alt="Franchise Hub" class="thumb-img" data-target="tv-image">
  <img src="business-analytics.jpg" alt="Business Analytics" class="thumb-img" data-target="tv-image">
  <!-- Cloud Based的图片，绑定手机目标 -->
  <img src="cloud-based.jpg" alt="Cloud Based & Mobile Image" class="thumb-img" data-target="mobile-image">
  <!-- 其他方形图片同理，都加上data-target -->
</div>

<!-- 大图显示区域 -->
<div class="display-container">
  <img id="tv-image" src="tv-screen.jpg" alt="TV Screen" class="display-img">
  <img id="mobile-image" src="mobile-phone.jpg" alt="Mobile Phone" class="display-img hidden">
</div>

第二步：添加基础CSS控制显示隐藏 #

我们需要一个隐藏类来控制大图的显示状态：

.hidden {
  display: none;
}

.display-container {
  /* 可以根据你的布局加样式，比如居中、固定大小等 */
  margin-top: 2rem;
  text-align: center;
}

第三步：编写JavaScript逻辑 #

这部分是核心，我们通过事件绑定来实现切换：

// 获取所有可点击的缩略图
const thumbImgs = document.querySelectorAll('.thumb-img');
// 获取两个大图元素
const tvImg = document.getElementById('tv-image');
const mobileImg = document.getElementById('mobile-image');

// 给每个缩略图绑定点击事件
thumbImgs.forEach(img => {
  img.addEventListener('click', function() {
    // 获取当前点击图片对应的目标大图标识
    const target = this.dataset.target;
    
    // 根据目标切换显示状态
    if (target === 'tv-image') {
      tvImg.classList.remove('hidden');
      mobileImg.classList.add('hidden');
    } else if (target === 'mobile-image') {
      mobileImg.classList.remove('hidden');
      tvImg.classList.add('hidden');
    }
  });
});

代码解释 #

• 我们用data-target这个自定义属性来关联缩略图和对应的大图，这样以后如果要加更多图片，只需要给新的缩略图加上对应的data-target，不用修改JS逻辑，扩展性很强。
• 通过classList.add()和classList.remove()来切换hidden类，从而控制图片的显示和隐藏。
• 如果你的DOM结构和我假设的不一样，只需要调整选择器（比如.thumb-img换成你实际的类名，id换成你实际的ID）就可以了。

这样就能实现你要的效果：点击除了「Cloud Based & Mobile Image」之外的方形图显示TV屏幕，点击它显示手机图片啦！

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