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

Question

在here 描述的标签库中，我在上面添加了单独的标题，并在扩展图像下添加了以下代码的内容，我确信可以简化（使用 DRY 规则:-)），对吧？

目标是一句话：当我点击#column1 时，显示#imgcontent1 和.title1 并隐藏所有其他的，以此类推每个#column。

$("#column1").click(function(){
    $("#imgcontent1").css("display", "block");
    $("#imgcontent2").css("display", "none");
    $("#imgcontent3").css("display", "none");
    $("#imgcontent4").css("display", "none");
    $("#imgcontent5").css("display", "none");
    $("#imgcontent6").css("display", "none");
    $(".title1").show();
    $(".title2").hide();
    $(".title3").hide();
    $(".title4").hide();
    $(".title5").hide();
    $(".title6").hide();
});
$("#column2").click(function(){
    $("#imgcontent1").css("display", "none");
    $("#imgcontent2").css("display", "block");
    $("#imgcontent3").css("display", "none");
    $("#imgcontent4").css("display", "none");
    $("#imgcontent5").css("display", "none");
    $("#imgcontent6").css("display", "none");
    $(".title1").hide();
    $(".title2").show();
    $(".title3").hide();
    $(".title4").hide();
    $(".title5").hide();
    $(".title6").hide();
});
$("#column3").click(function(){
    $("#imgcontent1").css("display", "none");
    $("#imgcontent2").css("display", "none");
    $("#imgcontent3").css("display", "block");
    $("#imgcontent4").css("display", "none");
    $("#imgcontent5").css("display", "none");
    $("#imgcontent6").css("display", "none");
    $(".title1").hide();
    $(".title2").hide();
    $(".title3").show();
    $(".title4").hide();
    $(".title5").hide();
    $(".title6").hide();
});
$("#column4").click(function(){
    $("#imgcontent1").css("display", "none");
    $("#imgcontent2").css("display", "none");
    $("#imgcontent3").css("display", "none");
    $("#imgcontent4").css("display", "block");
    $("#imgcontent5").css("display", "none");
    $("#imgcontent6").css("display", "none");
    $(".title1").hide();
    $(".title2").hide();
    $(".title3").hide();
    $(".title4").show();
    $(".title5").hide();
    $(".title6").hide();
});
$("#column5").click(function(){
    $("#imgcontent1").css("display", "none");
    $("#imgcontent2").css("display", "none");
    $("#imgcontent3").css("display", "none");
    $("#imgcontent4").css("display", "none");
    $("#imgcontent5").css("display", "block");
    $("#imgcontent6").css("display", "none");
    $(".title1").hide();
    $(".title2").hide();
    $(".title3").hide();
    $(".title4").hide();
    $(".title5").show();
    $(".title6").hide();
});
$("#column6").click(function(){
    $("#imgcontent1").css("display", "none");
    $("#imgcontent2").css("display", "none");
    $("#imgcontent3").css("display", "none");
    $("#imgcontent4").css("display", "none");
    $("#imgcontent5").css("display", "none");
    $("#imgcontent6").css("display", "block");
    $(".title1").hide();
    $(".title2").hide();
    $(".title3").hide();
    $(".title4").hide();
    $(".title5").hide();
    $(".title6").show();
});

这是 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>

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

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

感谢您的帮助和想法！

Answer 1

使用共享类而不是 ID 或数字索引属性，并使用单击的列索引来确定要显示哪个 imgcontent 和 title。例如

<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();
  });
});