عمليات الاستبداد المتعددة في 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