+1 к числу при наведении курсора

[NOIP]

Доброго времени суток, есть система лайков, сейчас работает так, нажимаешь на кнопку добавляется +1, хочу переделать что бы при наведении мышки на кнопку к уже имеющимся лайкам сразу дописывалось +1 к примеру если есть 15 лайков, навожу мышкой сразу подсвечивается зеленым 16 и при нажатии становится 16 и больше +1 не подсвечивается. Вот как реализовано сейчас

$(function () {
        $('#plus-<?php echo $item->id; ?>').click(function(){
            $.getJSON('?option=com_section&task=like&post_id=<?php echo $item->id; ?>', function(data){
            var rating = 1*$('#rating-<?php echo $item->id; ?>').text()+data.msg;
            $('#rating-<?php echo $item->id; ?>').text(rating);
                if(data.msg == 0){
            alert('Вы уже это лайкали!');
                }
            });
            return false;
        });
})(jQuery);

В контроллере проверяю так

    if ($resultVote->check == 0){$tt = 1;}else{$tt = 0;}
?>{"msg":<?=$tt?>}<?php

        if ($resultVote->check == 0){
            $db->setQuery("INSERT INTO #__main_like (`user_id`, `post_id`, `view_components`, `date_like`) VALUES ('{$user->id}', '{$post_id}', '{$components_type}', '{$date_like}')");
            $db->query();
        }
    die();

    }

Помогите пожалуйста прокачать систему лакойв.

Спасибо.

 

[Goot]

Ну так что мешает использовать .hover

$(function () {
        $('#plus-<?php echo $item->id; ?>').hover(function(){
            $.getJSON('?option=com_section&task=like&post_id=<?php echo $item->id; ?>', function(data){
            var rating = 1*$('#rating-<?php echo $item->id; ?>').text()+data.msg;
            $('#rating-<?php echo $item->id; ?>').text(rating);
                if(data.msg == 0){
            alert('Вы уже это лайкали!');
                }
            });
            return false;
        });
})(jQuery);

 

[NOIP]

Нужно что бы он при наведении не вызывал действие а просто как бы показал пользователю что может быть +1 как бы +1 зачисляется после нажатия а при наведении просто показывает.. вот..

 

[ykpon]

Как я понял, тут обработчики ивентов нажатия в цикле пыхом генерируются для каждого поста (или чего там) на странице? Убрать. Добавить кнопкам какой нибудь класс и обрабатывать нажатие на него, а ID поста прописывать в атрибуте id либо хранить в data элемента (пример будет показан).
Тогда будет один обработчик для множества кнопок. Будет лишь ID отличаться.
Ускорит загрузку страницы.
Для просмотра ссылки Войди или Зарегистрируйся
В data-id хранится ID поста.
В data-like значения 0/1. Если 0, значит лайкнут пользователем не был. Если 1, то был. По логике, думаю, разберешься как все работает.
Если будешь делать именно так, то после добавления лайка нужно убрать добавление 1 лайка из твоего обработчика и оставить лайк тот, который был добавлен после наведения. Если пост лайкнется, то добавленное значение не будет удалено после убирания мыши с кнопки.

 

[Goot]

Это хороший вариант, но мне кажется лучше все же показывать число +1. Так будет более правильно чтоб люди не путались.

 

[Jekins]

Это хороший вариант, но мне кажется лучше все же показывать число +1. Так будет более правильно чтоб люди не путались.

Не, лучше делать как эпл, сложный и не понятный вывод, но при этом он выводит то, что нужно, без лишних телодвижений. Довольно популярная вещь в ui

 

[shadera]

Как вариант можно добавить скрытый элемент с текстом +1, при ховере он будет прятаться/показываться, при клике будет показываться и будет инкрементироваться основной счетчик.

 

[kevinglare]

Возможно поможет, накидал быстро Для просмотра ссылки Войди или Зарегистрируйся

Доброго времени суток, есть система лайков, сейчас работает так, нажимаешь на кнопку добавляется +1, хочу переделать что бы при наведении мышки на кнопку к уже имеющимся лайкам сразу дописывалось +1 к примеру если есть 15 лайков, навожу мышкой сразу подсвечивается зеленым 16 и при нажатии становится 16 и больше +1 не подсвечивается. Вот как реализовано сейчас

$(function () {
        $('#plus-<?php echo $item->id; ?>').click(function(){
            $.getJSON('?option=com_section&task=like&post_id=<?php echo $item->id; ?>', function(data){
            var rating = 1*$('#rating-<?php echo $item->id; ?>').text()+data.msg;
            $('#rating-<?php echo $item->id; ?>').text(rating);
                if(data.msg == 0){
            alert('Вы уже это лайкали!');
                }
            });
            return false;
        });
})(jQuery);

В контроллере проверяю так

    if ($resultVote->check == 0){$tt = 1;}else{$tt = 0;}
?>{"msg":<?=$tt?>}<?php

        if ($resultVote->check == 0){
            $db->setQuery("INSERT INTO #__main_like (`user_id`, `post_id`, `view_components`, `date_like`) VALUES ('{$user->id}', '{$post_id}', '{$components_type}', '{$date_like}')");
            $db->query();
        }
    die();

    }

Помогите пожалуйста прокачать систему лакойв.

Спасибо.

 

[Absolute]

Это можно реализовать почти одним CSS-ом.

<style>
   [class^="like"]:after {
     content: '(' counter(var) ')';
   }
   .like_act, .like:hover{
     counter-reset: var +1;
   }
</style>
<div style="counter-increment: var 1280;" class="like" onclick="this.className='like_act'">Мне нравится </div>