Я работаю над кнопками "Следуй" и "Отменить". Последующий вариант работает нормально, но когда я нажимаю на 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');
} });
$(this)
.text( ($(this).text() == 'Follow' ? 'UnFollow' : 'Follow') )
.toggleClass("Unfollow");
Чтобы переключить оба класса, это самый простой подход:
$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/
$(".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');
}
});
$button.text( ($(this).text() == 'Follow' ? 'UnFollow' : 'Follow') ).toggleClass("Unfollow");
Вы можете сократить код:
$(".follow").on('click', function (e) {
e.preventDefault();
$(this).toggleClass("Unfollow").text(($(this).text() == 'Follow' ? 'UnFollow' : 'Follow'))
});
Также обратите внимание, что live()
устарел с версии 1.7
, вы должны использовать вместо него on()
.
live()
устарел, вы можете просто привязать событие к элементу кнопки.
$('button').click(function() {
$(this).toggleClass('follow')
.toggleClass('unfollow')
.text(function() {
return $(this).hasClass('follow') ? 'Follow' : 'Unfollow';
});
});
$(".follow").live('click'