Question

I want to assign a function to several div (“show” + i) at the same time, each call will assign another div (“theDiv” + i), but the “+i” does not work.

$("#show"+i).click(function()
{
$("#theDiv"+i).show("normal");
});

If I remplace the “i” by its values(0,1,2…) the code is working. So why can I correct this?
this is the entire function:

function getInfoProduits1()
{

    var request = new XMLHttpRequest();
    if(i<idProduits.length)
        {
            request.open("GET","http://patisserie-orient.fr/prestashop/prestashop/api/products/"+idProduits[i]+"?PHP_AUTH_USER="+PHP_AUTH_USER+"&ws_key="+ws_key,true);

            request.onreadystatechange = function()
                {
                    if(request.readyState==4)
                    {
                        //alert("Status2 is  "+request.status);
                        if (request.status == 200 || request.status == 0)
                        {
                            response1  = request.responseXML.documentElement;
                            nameProduits[i] = response1.getElementsByTagName('name')[0].getElementsByTagName('language')[0].firstChild.data;
                            //alert(nameProduits[i]);
                            priceProduits[i] = response1.getElementsByTagName('price')[0].firstChild.data+" €";
                            //alert(priceProduits[i]);
                            descriptionProduits[i] = response1.getElementsByTagName('description_short')[0].getElementsByTagName('language')[0].firstChild.data;
                            //alert(descriptionProduits[i]);
                            quantitieProduitsDisponible[i] = response1.getElementsByTagName('quantity')[0].firstChild.data;
                            //alert(quantitieProduitsDisponible[i]);

                            maDiv = document.createElement("div");
                            maDiv.id = 'id_de_la_div'+i;

                            malabel = document.createElement("div");
                            malabel1 = document.createElement("div");
                            mon_bouton1 = document.createElement("button");
                             maDiv2 = document.createElement("div");
                            mon_bouton1.id="show"+i;
                            maDiv2.id="theDiv"+i;
                            maDiv2.innerHTML="Détails:";
                            maDiv2.style.display="none";
                           //mon_bouton1.value='click';

                           $("#show"+i).click(function(){

            $("#theDiv"+i).show("normal");
            });
                         mon_bouton1.onclick='aff();';
                            malabel.innerHTML=nameProduits[i];
                            malabel1.innerHTML=priceProduits[i];
                            maDiv.innerHTML='<img src="Images/Icones/dollars.png" width="50" height="50" align="right">';
                            //maDiv.innerHTML='<button type="button" id="show" onclick="aff();">Détails</button> ';
                            maDiv.className="ui-bar ui-bar-e cadre";
                            document.getElementById("divbar").appendChild(maDiv);
                            document.getElementById('id_de_la_div'+i).appendChild(malabel);
                            document.getElementById('id_de_la_div'+i).appendChild(malabel1);
                            document.getElementById('id_de_la_div'+i).appendChild(mon_bouton1);
                            document.getElementById('id_de_la_div'+i).appendChild(maDiv2);
                            maDivvide = document.createElement("div");
                            maDivvide.innerHTML='<br>';
                            document.getElementById("divbar").appendChild(maDivvide);
                            i++;
                             getInfoProduits1();
                         }
                     }
                }

            request.send();

        }   
    else
        {
            return;
        }

}

Answer 1

I don’t understand what you really mean but maybe this is what you need

//attach an event handler to all elements with an id that starts with "show"
$("[id^=show]").click(function(){
   //get only the number from the clicked id
   var i = this.id.replace("show", "");
  //show the relevant div
  $("#theDiv"+i).show("normal");
});