Несколько замены в jQuery?
-
29-09-2019 - |
Вопрос
Почему это не работает? Каково было бы правдоподобным решением, чтобы получить этот эффект?
$(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>');
});
});
Я новичок в петле и как я должен добавлять струны и переменные.
$(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>');
});
};
});
Решение
Проблема в myLink2
не существует, пока mylink
нажимается. Вы должны добавить mylink2
обработчик после его создания. Попробуйте следующее:
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);
});
Я должен отметить, что вам может быть лучше жестко кодировать ссылки и просто использовать .show()
переключить их.
Другие советы
В качестве альтернативы:
$(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>');
})
;
});
Чтобы обобщить это для целой группы такой ссылки, с аналогичной конвенцией об именах:
$(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);
});
Не связан с StackOverflow