Множественная замена с помощью jQuery? - PullRequest
Новая
       6

Множественная замена с помощью jQuery?

1 голос
/ 24 июня 2010

Почему это не работает?Какое было бы приемлемое решение для получения этого эффекта? 

$(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>');
    });
  };
});

Ответы [ 2 ]

1 голос
/ 24 июня 2010

Проблема в 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() для их переключения.

0 голосов
/ 24 июня 2010

В качестве альтернативы: 

$(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);
});
...