Plusieurs points de remplacement dans jQuery?

Question

Pourquoi cela ne fonctionne-t-il pas? Quelle serait une solution plausible pour obtenir cet effet?

$(document).ready(function() { 

    $('#myLink1').click(
    function() { 
     $('#myLink1').replaceWith('<a id="myLink2" href="#panel2">#panel2</a>'); 
    }); 

    $('#myLink2').click(
    function() { 
     $('#myLink2').replaceWith('<a id="myLink3" href="#panel3">#panel3</a>'); 
    }); 

}); 

Je suis nouveau dans les boucles et je suis censé ajouter des chaînes et des variables.

$(document).ready(function() { 
    var panelNum = 8; 
    for (i=1;i<=panelNum;i++){ 
    $('#myLink'+i).click(function() { 
     $('#myLink'+i).replaceWith('<a id="myLink'+(i+1)+'" href="#panel'+(i+1)+'">#panel'+(i+1)+'</a>'); 
    }); 
    }; 
}); 

Answer 1

Le problème est myLink2 n'existe pas jusqu'à ce que mylink cliquez dessus. Vous devez ajouter le gestionnaire mylink2 après sa création. Essayez les éléments suivants:

function add_replace_with(i){ 
$('#myLink'+i).click(
    function() { 
    do_replace_with(i) 
      return false; 
    }); 
} 
    function do_replace_with(i){ 
     $('#myLink'+i).replaceWith('<a id="myLink'+(i+1)+'" href="#panel'+(i+1)+'">#panel'+(i+1)+'</a>'); 

    $('#myLink'+(i+1)).click(
     function() { 
     do_replace_with(i+1) 
     }); 
    } 

$(document).ready(function() { 
add_replace_with(1); 
}); 

Je dois souligner, que vous pourriez être mieux de coder en dur les liens et en utilisant simplement .show() pour les activer.

Answer 2

Autre possibilité:

$(function() { 
    $('body') 
    .delegate('#myLink1', 'click', function() { 
     $(this).replaceWith('<a id="myLink2" href="#panel2">#panel2</a>'); 
    }) 
    .delegate('#myLink2', 'click', function() { 
     $(this).replaceWith('<a id="myLin32" href="#panel3">#panel2</a>'); 
    }) 
    ; 
}); 

Généraliser ce pour tout un tas de tel lien, avec convention de dénomination similaire:

$(function() { 
    for (var link = 1; link < 8; ++link) 
    (function(link) { 
     $('body').delegate('#myLink' + link, 'click', function() { 
     var nxt = link + 1; 
     $(this).replaceWith('<a id="#myLink' + nxt + '" href="#panel' + nxt + '">panel ' + nxt + '</a>'); 
     }); 
    })(link); 
});