使用jquery显示单个内容-简化代码？

在如上所述的标签库中，我用下面的代码添加了上面的单独标题和扩展图像下的内容，我相信这些代码可以简化（遵循干式规则：-），对吗

目标是一句话：当我点击#column1 show#imgcontent1和.title1并隐藏所有其他内容时，依此类推

以下是HTML：

<div class="stage" style="display:none;">
  <div id="imgtext">
  <span class="title1"></span>
  <span class="title2"></span>
  <span class="title3"></span>
  <span class="title4"></span>
  <span class="title5"></span>
  <span class="title6"></span>
  </div>
  <span class="closebtn">X</span>
  <img id="expandedImg" />
  <div id="imgcontent1">Content 1</div>
  <div id="imgcontent2">Content 2</div>
  <div id="imgcontent3">Content 3</div>
  <div id="imgcontent4">Content 4</div>
  <div id="imgcontent5">Content 5</div>
  <div id="imgcontent6">Content 6</div>
</div> 
<div id="column1" class="column">
  <img src="train.jpg" alt="train" title="train" />
</div>
<div id="column2" class="column">
  <img src="bike.jpg" alt="bike" title="bike" />
</div>
<div id="column3" class="column">
  <img src="cake" alt="cake" title="cake" />
</div>
<div id="column4" class="column">
  <img src="mask.jpg" alt="mask" title="mask" />
</div>
<div id="column5" class="column">
  <img src="clown" alt="Clown" title="Clown" />
</div>
<div id="column6" class="column">
  <img src="ski.jpg" alt="ski" title="ski" />
</div>

X

（注意：标题也是使用jquery从图像alt属性获取的）

我确信我的代码过于间接，但到目前为止，它仍能正常工作。：-）

---

谢谢你的帮助和想法

使用共享类而不是ID或数字索引属性，并使用单击的列索引确定要显示的

imgcontent

和

title

。乙二醇

<span class="title"></span>
<span class="title"></span>

---

令人惊叹的！谢谢

<span class="title"></span>
<span class="title"></span>

<div class="imgcontent">Content 1</div>
<div class="imgcontent">Content 2</div>

const columns = $('.column');
const contents = $('.imgcontent');
const titles = $('.title');

columns.each((i, div) => {
  $(div).click(() => {
    contents.hide();
    titles.hide();
    $(contents[i]).show();
    $(titles[i]).show();
  });
});