Question

我花了半天时间编写我网站索引页面的内容部分但是当我尝试将另一个图像添加到图像列表中时（目前有6个）这是一个非常漫长而烦人的过程。（网站：http://rikahiyuka.com）

有没有办法编写代码，以便更容易添加更多按钮（图像）？

列出的每张图片链接的内容： - JQuery - Div（链接）

最烦人的部分是添加到JQuery。

是否有更好的方法为内容部分中的按钮/图像编写代码，使其更紧凑，更易于编辑？

注意：使用PHP的index.php文件的唯一部分是年份编号的页脚。

Answer 1

不要单独执行每个图像，只需编写一个函数：

function showhide(shownum) {
  $("#Ip1, #Ip2, #Ip3, #Ip4, #Ip5, #Ip6").hide();
  $("#Il1, #Il2, #Il3, #Il4, #Il5, #Il6, #IDTopic").hide();
  $("#Ip" + shownum + ", #IDTopic, #Il" + shownum).show();
}

然后，如果你想展示一些东西，你只需要调用这个函数：

showhide(6);

您可以将其放入HTML中（如下所示：）

<td>
<img id="Iimg1" class="c-img" src="#" title="Show 1" onclick="showhide(1) />
</td>

或编辑您的JavaScript：

$("#Iimg1").click(function(){
showhide(1);
});

用您想要显示的链接替换1。这将使它更快，更不烦人，因为你不必列出要显示和隐藏的每个元素。只需调用showhide函数:)它基本上可以使用，而不是担心隐藏除了单击之外的所有内容，隐藏所有链接。然后，显示请求的那个。

压缩/替代代码： -

1 个答案: