Отписаться JS не работает

0

скрипка

Я работаю над кнопками "Следуй" и "Отменить". Последующий вариант работает нормально, но когда я нажимаю на unfollow, он не переходит в следующее. Полный код, размещенный на JsFiddle

$(".follow").live('click', function(e){
    e.preventDefault();
    $button = $(this);
    if($button.hasClass('unfollow')){

        //$.ajax(); Do Unfollow

        $button.removeClass('follow');
        $button.removeClass('unfollow');
        $button.text('Follow');
    } 
    else {

        // $.ajax(); Do Follow

        $button.addClass('follow');
        $button.text('Unfollow');
    } });
  • 0
    Вы проверяете событие click, используя $(".follow").live('click'
  • 3
    И я подумал, что unfollow js - это какая-то новая библиотека :)
Показать ещё 1 комментарий
Теги:

5 ответов

5
Лучший ответ
$(this)
.text( ($(this).text() == 'Follow' ? 'UnFollow' : 'Follow') )
.toggleClass("Unfollow");

Рабочий скрипт

  • 0
    +1 Это должен быть выбранный ответ ... Не могу поверить, что другой парень украл его и получил его выбранным.
1

Чтобы переключить оба класса, это самый простой подход:

$button.toggleClass('unfollow').toggleClass('follow');

И кнопка указала:

<button class="follow">

или

<button class="unfollow">

И для текста кнопки вам понадобится что-то вроде этого (после того, как цепочка переключения выше):

$button.text($button.hasClass('follow') ? 'follow' : 'unfollow'); 

И вы должны были бы слушателей для обоих follow и unfollow классов (вы забыли, что).

Итак, весь код должен выглядеть так (обратите внимание на использование функции on()):

 $("body").on('click', ".follow, .unfollow", function(e){
     e.preventDefault();
     $button = $(this); 
     $button.toggleClass('unfollow').toggleClass('follow');
     $button.text($button.hasClass('follow') ? 'follow' : 'unfollow'); 
 });

См. Здесь: http://jsfiddle.net/ZECEN/110/

0

Демо-версия скрипта

 $(".follow").live('click', function (e) {
     e.preventDefault();
     $button = $(this);
     if ($button.hasClass('unfollow')) {

         //$.ajax(); Do Unfollow

         $button.addClass('follow'); //changed here to addClass follow
         $button.removeClass('unfollow');
         $button.text('Follow');
     } else {

         // $.ajax(); Do Follow

         $button.addClass('unfollow');//changed here to addClass unfollow
         $button.text('Unfollow');
     }
 });


Лучше использовать .toggleClass()

Демо-версия скрипта

$button.text( ($(this).text() == 'Follow' ? 'UnFollow' : 'Follow') ).toggleClass("Unfollow");
0

Вы можете сократить код:

$(".follow").on('click', function (e) {
    e.preventDefault();
    $(this).toggleClass("Unfollow").text(($(this).text() == 'Follow' ? 'UnFollow' : 'Follow'))
});

Также обратите внимание, что live() устарел с версии 1.7, вы должны использовать вместо него on().

Демо-версия скрипта

0

live() устарел, вы можете просто привязать событие к элементу кнопки.

$('button').click(function() {
    $(this).toggleClass('follow')
           .toggleClass('unfollow')
           .text(function() {
               return $(this).hasClass('follow') ? 'Follow' : 'Unfollow';
            });
});

Демонстрация.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню