Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.07.2013, 18:00
Новичок на форуме
Отправить личное сообщение для CaguCT Посмотреть профиль Найти все сообщения от CaguCT
 
Регистрация: 07.07.2013
Сообщений: 3

Почему не работает переключение ссылки
код:
<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/

Нажимается только один раз, не могу понять в чем прикол.
Ответить с цитированием
  #2 (permalink)  
Старый 07.07.2013, 19:26
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Вы не правильно понимаете принцип работы.
$(".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

Последний раз редактировалось danik.js, 07.07.2013 в 19:36.
Ответить с цитированием
  #3 (permalink)  
Старый 08.07.2013, 00:48
Новичок на форуме
Отправить личное сообщение для CaguCT Посмотреть профиль Найти все сообщения от CaguCT
 
Регистрация: 07.07.2013
Сообщений: 3

Спасибо огромное, буду разбираться в том что Вы написали.
Хотя все равно не понимаю, делал подобное на другом сайте с таким кодом:
в 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>

Ну и работает прекрасно.
Еще раз спасибо за ответ.
Ответить с цитированием
  #4 (permalink)  
Старый 08.07.2013, 07:31
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Так тут вы на 7-8 строчках изменяете класс. В итоге при каждой загрузке страницы отрабатывает либо первая часть кода (а вторая - мертвый код) либо вторая (первая - мертвый код) в зависимости от установленного класса. Да и видно что код дублируется, а значит вы делаете это не правильно.
Нужно просто понять что $ - это функция, просто с таким прикольным именем. И что она ищет элемены по селектору (прямо сейчас), и если ни одного элемента не найдено с таким селектором, то дальнейшие функции в цепочке, типа .click() не несут полезной нагрузки. Нужно начинать изучениe с чистого JS, а те кто сразу лезет в jQuery вот так и начинает тупить.

Последний раз редактировалось danik.js, 08.07.2013 в 07:34.
Ответить с цитированием
  #5 (permalink)  
Старый 08.07.2013, 07:36
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Можно событие ещё через live навешать.

А ещё, мне кажется, что удобнее писать цепочкой:
$(this).text("Выключить editor").removeClass().addClass("editoroff");
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему некоторые операторы возвращают значения, а не ссылки? dump Общие вопросы Javascript 15 25.07.2012 17:28
почему не работает два автокомплита вместе mcavalon AJAX и COMET 3 23.12.2011 11:56
Объясните почему не работает??? San4az Общие вопросы Javascript 2 11.05.2010 14:31
Почему не работает код? JSprog Общие вопросы Javascript 4 16.08.2009 14:39
Почему не работает функция? Vitaly jQuery 10 31.07.2009 17:01