Mehrere replaceWiths in jQuery?
-
29-09-2019 - |
Frage
Warum funktioniert das nicht? Was wäre eine plausible Lösung sein, um diese Wirkung zu erzielen?
$(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>');
});
});
Ich bin neu in Schleifen und wie ich soll Strings und Variablen hinzuzufügen.
$(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>');
});
};
});
Lösung
Das Problem ist myLink2
nicht existiert, bis mylink
geklickt wird. Sie haben die mylink2
Handler hinzufügen, nachdem sie erstellt wird. Versuchen Sie Folgendes:
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);
});
soll ich beachten Sie, dass Sie besser sein könnten von Hartcodierung der Links und nur .show()
mit ihnen zu wechseln.
Andere Tipps
Alternativ:
$(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>');
})
;
});
Um dies zu verallgemeinern für eine ganze Reihe von solchen Link, mit ähnlicher Namenskonvention:
$(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);
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow