Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Почему не работает переключение ссылки (https://javascript.ru/forum/misc/39661-pochemu-ne-rabotaet-pereklyuchenie-ssylki.html)

CaguCT 07.07.2013 18:00

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

Нажимается только один раз, не могу понять в чем прикол.

danik.js 07.07.2013 19:26

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

CaguCT 08.07.2013 00:48

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

Ну и работает прекрасно.
Еще раз спасибо за ответ.

danik.js 08.07.2013 07:31

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

ruslan_mart 08.07.2013 07:36

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

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


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