如何使用jQuery将图片标签嵌套到链接标签中以实现点击跳转？

没问题，要实现把两张图片嵌套到<a>标签里、点击图片就能跳转的效果，只需要调整你创建元素的顺序——先创建锚点标签，再把两张图片追加到这个锚点内部，最后把锚点（包含图片和可选的文本）添加到容器中就可以了。

修改后的完整代码 #

projects.forEach((project) => { 
  let projectContainer = $('<div>').addClass('Project').appendTo($('.ProjectsContainer')); 
  $('<h1>').text(project.Title).appendTo(projectContainer); 
  
  // 先创建锚点元素，配置好类名和跳转链接
  let projectLink = $('<a>').addClass('ViewBtb').attr('href', project.GitHubLink);
  
  // 将两张图片依次添加到锚点内部
  $('<img>').addClass('DesktopImg').attr('src', project.DesktopImage).appendTo(projectLink); 
  $('<img>').addClass('MobileImg').attr('src', project.MobileImage).appendTo(projectLink); 
  
  // 保留原来的链接文本（如果不需要可以删除这一行）
  projectLink.append('GitHub Repo');
  
  // 把包含图片和文本的锚点添加到项目容器中
  projectLink.appendTo(projectContainer); 
  
  $('<p>').text(project.Description).appendTo(projectContainer); 
}); 

代码说明 #

• 我们先创建了<a>元素并配置好href和类名，作为承载图片的容器；
• 然后把原来的两张<img>元素追加到这个锚点内部，而不是直接添加到projectContainer；
• 如果不需要原来的"GitHub Repo"文本，直接删除projectLink.append('GitHub Repo');这一行即可；
• 最终生成的HTML结构会和你期望的一致：两张图片都嵌套在<a>标签中，点击图片就能触发跳转。

生成的HTML结构示例：

<div class="Project">
  <h1>Sample Project Title</h1>
  <a href="your-github-link" class="ViewBtb">
    <img src="desktop-image-path" class="DesktopImg">
    <img src="mobile-image-path" class="MobileImg">
    GitHub Repo
  </a>
  <p>Sample project description text.</p>
</div>

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