para que mi codigo sea mas eficiente necesito optimizarlo, en mi documento tengo cuatro enlaces cada uno con un id distinto para despues poderlo seleccionarlos desde js, una vez que lo selecciono creo una funcion que hace una peticion al servidor que a su vez responde con un archivo en este caso con un script php que se encarga de mostrar todo el contenido de una carpeta, al momento el codigo funciona sin problemas, aunque tarda un poquito en cargar no es un problema grave.
resumiendolo todo, lo que tengo pensado quizas no sea la menara correcta de hacerlo esto consiste es quitar los ids a los enlaces y seleccionarlos por medio de su indice con el objeto document.getElementsByTags(indice)
luego dependiendo del link se carge el archivo, este lo tengo como paratremo en mi peticion ajax.
despues de esto con el script php creo que en futuro vendrian problemas porque cada vez que agrege un nuevo enlace a una carpeta deberia de crear un nuevo script y copiar el mismo codigo con algunas variaciones para mostrar el contenido de la carpeta.
<html>
<nav id="menu-vertical">
<ul>
<li><a href="#" id="link-clothes">clothes</a></li>
<li><a href="#" id="carpeta2">carpeta2</a></li>
<li><a href="#" id="carpeta3">carpeta3</a></li>
<li><a href="#" id="carpeta4">carpeta4</a></li>
</ul>
</nav>
<div id="seccion-datos"></div>
ajax = new XMLHttpRequest();
seccionDatos = document.getElementById('seccion-datos');
linkClothes = document.getElementById("link-clothes");
carpeta2 = document.getElementById("carpeta2");
carpeta3 = document.getElementById("carpeta3");
linkClothes.addEventListener("click", function(){
ajax.open("get", "clothes.php", true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4 && ajax.status==200) {
texto=ajax.responseText;
seccionDatos.innerHTML= texto;
}
}
ajax.send(null);
})
carpeta2.addEventListener("click", function(){
ajax.open("get", "carpeta2.php", true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4 && ajax.status==200) {
texto=ajax.responseText;
seccionDatos.innerHTML= texto;
}
}
ajax.send(null);
})
<?php
$folder = opendir('clothes');
$file = readdir($folder);
while($file=readdir($folder)) {
echo "<img src=clothes/$file>";
}
closedir($folder);
?>
como podran apreciar en mi codigo se repiten varias veces las mismas cosas por este motivo creo que me convendria utilizar las delegaciones porque si voy anadiendo mas enlaces esto se volveria infinito, el problema es que todavia no manejo bien esa tecnica, conosco solo el concepto y creo que en este caso seria necesario utilizarlo.