压缩/替代代码： -

Question

I spent half a day writing the content section of my index page of my website but when I tried adding another image to the list of images (There is currently 6) it was a very long and annoying process. (Website: http://rikahiyuka.com)

Is there a way to write the code so that it will be easier to add more buttons (The Images)?

Things that are linked per image listed: - JQuery - Div (Link)

The most annoying part is adding to the JQuery.

Is there a better way to write the code for the buttons/images in the content section so it is more compact and easier to edit?

Note: The only section of the index.php file that uses PHP is the footer for the year number.

Answer 1

Instead of doing each image individually, just write one function:

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

Then, if you want to show something, you simply call this function:

showhide(6);

You can put it in your HTML (like so:)

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

or edit your JavaScript:

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

Replacing 1 with whichever link you want to show. This will make it much quicker and much less annoying because you won't have to list out each element to show and hide. Just call the showhide function :) It basically works by, instead of worrying about hiding everything except the one clicked on, hiding ALL of the links. Then, showing the one requested.