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

如何解决使用 jquery 显示单个内容 - 简化代码？

在如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");
    $(".title1").hide();
    $(".title2").show();
    $(".title3").hide();
    $(".title4").hide();
    $(".title5").hide();
    $(".title6").hide();
});
$("#column3").click(function(){
    $("#imgcontent1").css("display","block");
    $("#imgcontent4").css("display","none");
    $(".title1").hide();
    $(".title2").hide();
    $(".title3").show();
    $(".title4").hide();
    $(".title5").hide();
    $(".title6").hide();
});
$("#column4").click(function(){
    $("#imgcontent1").css("display","block");
    $("#imgcontent5").css("display","none");
    $(".title1").hide();
    $(".title2").hide();
    $(".title3").hide();
    $(".title4").show();
    $(".title5").hide();
    $(".title6").hide();
});
$("#column5").click(function(){
    $("#imgcontent1").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","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 属性中获取的）

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

感谢您的帮助和想法！

解决方法

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

title

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

然后你就可以：

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