如何将选中标签切换图片的多段jQuery代码简化为单个函数？

你可以通过以下几种方式将重复的点击事件简化为单个函数，这里推荐最易维护的方案：

方案一：利用HTML自定义data-*属性（推荐） #

先给每个标签元素添加自定义属性，存储对应的背景图路径：

<div id="tab-one" data-image="img/img-1.png">标签1</div>
<div id="tab-two" data-image="img/img-2.png">标签2</div>
<div id="tab-three" data-image="img/img-3.png">标签3</div>

然后编写一个通用的点击事件处理函数即可：

// 选择所有id以tab-开头的标签元素
$("[id^='tab-']").click(function() {
  // 获取当前点击标签对应的图片路径
  const imageUrl = $(this).data("image");
  // 设置目标元素的背景图
  $(".masthead.product-detail").css("background-image", `url(${imageUrl})`);
});

这种方式的优势是解耦了JS逻辑和元素命名规则，后续新增标签只需添加对应的data-image属性即可，无需修改JS代码。

方案二：通过元素ID的命名规则匹配图片路径 #

如果不想修改HTML结构，可以利用现有ID的命名规律（tab-one对应img-1.png）动态生成图片路径：

$("[id^='tab-']").click(function() {
  // 从ID中提取数字部分：比如从tab-one得到1
  const tabIndex = this.id.split("-")[1].replace(/[^0-9]/g, '');
  // 动态拼接图片路径
  const imageUrl = `img/img-${tabIndex}.png`;
  // 设置背景图
  $(".masthead.product-detail").css("background-image", `url(${imageUrl})`);
});

如果你的ID直接是tab-1、tab-2这种数字后缀，代码可以更简洁：

$("[id^='tab-']").click(function() {
  const tabIndex = this.id.split("-")[1];
  const imageUrl = `img/img-${tabIndex}.png`;
  $(".masthead.product-detail").css("background-image", `url(${imageUrl})`);
});

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