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

Question

在所描述的选项卡库中我在上面添加了单独的标题，在扩展图像下添加了以下代码的内容，我相信这可以简化（遵循 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();
  });
});

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

Show individual content with jquery - simplify code?

jquery

toggle

image-gallery

simplify

simplification