Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Pамена тегов (https://javascript.ru/forum/jquery/18700-pamena-tegov.html)

Blizzart 12.07.2011 13:18

Pамена тегов
 
<script type="text/javascript">$('td a').click(function() {
    $('<span>' + '2011' + '</span>').replaceWith($('<a>' + '2011' + '</a>').attr('href','#2011'));
    $('<span>' + '2010' + '</span>').replaceWith($('<a>' + '2010' + '</a>').attr('href','#2010'));
    $('<span>' + '2009' + '</span>').replaceWith($('<a>' + '2009' + '</a>').attr('href','#2009'));
    $('<span>' + '2008' + '</span>').replaceWith($('<a>' + '2008' + '</a>').attr('href','#2008'));
    
    $(this).replaceWith('<span>' + $(this).text() + '</span>');
});</script>

Есть 4 ссылки
2011, 2010, 2009, 2008
Я хочу сделать, чтобы при клике по ссылке она становилась не активной, то есть менялась на строку.
А при клике по другой ссылке, она бы снова становилась ссылкой и т.д.
Скрипт заменяет <a> на <span>, а обратно не возвращает.
Может проще это сделать перемещением элементов в невидимый див(dettach, append)?

micscr 12.07.2011 15:27

Накидал как можно сделать:
http://jsfiddle.net/UY4gS/

Blizzart 12.07.2011 19:41

micscr, спасибо!
Но меня волнует еще 2 вопроса, никак не найду:
можно ли как то передать id от одного к другому при замене тегов?
Так не получается
$('td a').click(function() {
var _id = $(this).attr('id');
$(this).replaceWith('<span>' + $(this).text() + '</span>' +.attr('id',_id));
});

И можно ли искать тег не по id или class, а по содержимому?
Например, найти строку с текстом "2011" и заменить на ссылку. Так он меняет все строки:
$('span').text('2011').replaceWith($('td a').text('2011').attr('href','#2011'));

walik 12.07.2011 19:55

Цитата:

Сообщение от Blizzart
И можно ли искать тег не по id или class, а по содержимому?

$("a:contains('2011')");

Цитата:

Сообщение от Blizzart
можно ли как то передать id от одного к другому при замене тегов?

$(this).replaceWith('<span id="'+$(this).attr('id')+'">' + $(this).text() + '</span>');

Blizzart 12.07.2011 23:27

Благодарю всех за участие в моем обучение JQ :victory:
Написал вариант функции более понятный для новичка, потому что с тем, что предложил micscr, я долго разбирался :)
$('td a').live("click", function() {
    var $anchor = $(this);
    $('#y2011').hide('fast');
    $('#y2010').hide('fast');
    $('#y2009').hide('fast');
    $('#y2008').hide('fast');
	$('span:contains("2011")').replaceWith('<a href="#y2011">2011</a>'); 
	$('span:contains("2010")').replaceWith('<a href="#y2010">2010</a>'); 
	$('span:contains("2009")').replaceWith('<a href="#y2009">2009</a>'); 
	$('span:contains("2008")').replaceWith('<a href="#y2008">2008</a>'); 
        $($anchor.attr('href')).show('fast');
	$(this).replaceWith('<span>' + $(this).text() + '</span>');
});

В левой ячейки 4 дива(у каждого id соответсвует названию якоря), а в правой 4 кнопки и таким образом можно сменять содержимое левой ячейки через ксс:дисплей


Часовой пояс GMT +3, время: 03:07.