Un clic sur le bouton "Remplir" transforme un menu existant dans le corps de la page web.
Un clic sur le bouton "Remplir" transforme un menu existant dans le corps de la page web.
Code JS :
$( "#btnSommaire" ).on( "click", function(){
/*
* Attention, ici on ne crée pas un nouveau fragment
* du DOM, on crée de nouveaux attributs et on modifie
* des attributs d'un élément du DOM existant déjà dans
* la page web.
*
* Pour modifier un attribut existant, j'utilise de
* préférence la méthode : $( selector ).attr( attributeName,
* function( index, oldValue ){ ... });
*
* Le paramètre index de cette fonction n'est utile que
* si $( selector ) contient plusieurs objets jQuery.
*/
var dataset = [
{
"text" : "Plugin dvjhDialogModal",
"href" : "/dialogModal/dialogModal.php"
},
{
"text" : "La fractale de Benoît Mandelbrot",
"href" : "/MandelbrotXXL/MandelbrotXXL.php"
},
{
"text" : "Plugin multitâche : méthode de construction personnelle et exemples",
"href" : "/tutoriels/javascript/construire-utiliser-plugin-multitaches/"
},
{
"text" : "Plugin dvjhClone",
"href" : "/plugin-dvjh/clone/clone.php"
},
{
"text" : "Plugin nopainLasVegas",
"href" : "/plugin-dvjh/LasVegas/LasVegas.php"
},
],
jObjA = $( "#sommaire" ).find( "a" );
if ( dataset.length === jObjA.length ){
var jObjTemp = null;
jObjA.each( function( i, item ){
jObjTemp = $( item );
jObjTemp.attr({
"target": "_blank", // on crée cet attribut
"href": function(){
/*
* On modifie le contenu HTML du tag "a" avec la
* méthode text() et on modifie l'attribut "href".
*/
jObjTemp.text( dataset[ i ][ "text" ] );
jObjTemp.attr( "href", function( index, oldValue ){
return oldValue + dataset[ i ][ "href" ];
});
},
"title": "Pour le fun !" // on crée cet attribut
});
});
}
});