Почему не работает переключение ссылки
код:
<a href="#" class="onautosave">Включить автосохранение</a> //<![CDATA[ $(document).ready(function(e) { $(".onautosave").click(function() { $(this).html("Включить editor"); $(this).removeClass(); $(this).addClass("offautosave"); return false; }); $(".offautosave").click(function() { $(this).html("Выключить editor"); $(this).removeClass(); $(this).addClass("onautosave"); return false; }); }); //]]> пример тут http://jsfiddle.net/e8FTc/3/ Нажимается только один раз, не могу понять в чем прикол. |
Вы не правильно понимаете принцип работы.
$(".offautosave").click(function() { }) - вот этот код ничего не сделает, так как на момент его выполнения нет ни одного элемента с классом .offautosave (он же у вас появится только после нажатия на ссылку, верно?) Поэтому и обработчик не на что вешать. А первый обработчик будет всегда отрабатывать вне зависимости от текущего класса, ибо он ведь уже навешен на элемент и вы его не удалили. Сделайте так: $(document).ready(function(e) { var states = { on: {text: 'Включить editor', next: 'off'}, off: {text: 'Выключить editor', next: 'on'} }; $(".autosave").click(function(event) { var state = $(this).data('state') || 'on'; $(this).removeClass(state); state = states[state].next; $(this).html(states[state].text); $(this).addClass(state); $(this).data('state', state); event.preventDefault(); }); }); Для стилей используйте .autosave.on и .autosave.off И еще - использовать <![CDATA[ никчему если у вас не XHTML |
Спасибо огромное, буду разбираться в том что Вы написали.
Хотя все равно не понимаю, делал подобное на другом сайте с таким кодом: в head: $(document).ready(function(){ var editor = $.cookie('editor'); if( editor != null && editor=='on' ) { $(".editoron").text("Выключить editor"); $(".editoron").addClass("editoroff"); $(".editoron").removeClass("editoron"); } $(".editoron").click(function() { if( $.cookie('editor') != 'on' ) { $.cookie('editor', 'on', {expires:31, path:"/"}); $(this).text("Выключить editor"); $(this).removeClass(); $(this).addClass("editoroff"); } else { $.cookie('editor', '', {expires:-1, path:"/"}); $(this).text("Включить editor"); $(this).removeClass(); $(this).addClass("editoron"); } return false; }); $(".editoroff").click(function() { if( $.cookie('editor') != null ) { $.cookie('editor', '', {expires:-1, path:"/"}); $(this).text("Включить editor"); $(this).removeClass(); $(this).addClass("editoron"); } else { $.cookie('editor', 'on', {expires:31, path:"/"}); $(this).text("Выключить editor"); $(this).removeClass(); $(this).addClass("editoroff"); } return false; }); }); В body: <a href="#" class="editoron">Включить editor</a> Ну и работает прекрасно. Еще раз спасибо за ответ. |
Так тут вы на 7-8 строчках изменяете класс. В итоге при каждой загрузке страницы отрабатывает либо первая часть кода (а вторая - мертвый код) либо вторая (первая - мертвый код) в зависимости от установленного класса. Да и видно что код дублируется, а значит вы делаете это не правильно.
Нужно просто понять что $ - это функция, просто с таким прикольным именем. И что она ищет элемены по селектору (прямо сейчас), и если ни одного элемента не найдено с таким селектором, то дальнейшие функции в цепочке, типа .click() не несут полезной нагрузки. Нужно начинать изучениe с чистого JS, а те кто сразу лезет в jQuery вот так и начинает тупить. |
Можно событие ещё через live навешать.
А ещё, мне кажется, что удобнее писать цепочкой: $(this).text("Выключить editor").removeClass().addClass("editoroff"); |
Часовой пояс GMT +3, время: 11:32. |