Смена класса блока при обновлении на аякс

@nevai · Регистрация: 18.01.2013

Author24 — интернет-сервис помощи студентам

Доброго времени суток веб-мастера! Такой вопрос к вам поскольку только изучаю jquery и ajax коечто смог сделать.
Но столкнулся с проблемй.
Вопрос:

У меня есть голосование за комментарии рейтинг вообщем +/-
Обновляется на аяксе, на плюс и мину стоит соответственно иконка с знаками.

Вот сам скрипт обработки запроса

Javascript

$(document).ready(function(){
    $('.rate').click(function(){
        var _class = $(this).attr('class').split(' ');
        var _id = $(this).attr('id').split('_'); 
        _rating( _id[1], _class[1] );
        return false;
    });
 
});
 
function _rating(idpost, action) {
$.ajax({
        type: "POST",
        url: "commentsrating.php",
        data: "idpost=" + idpost + "&action=" + action,
        success: function(html){
            $("#rateresult-" + idpost).html(html);
            
        }
    });
}

Сам код голосования вот

HTML5

<div class="rating">
        <a class="rate plus" id="pid_<?=$myrow3["id"]?>" href="javascript:void(Плюс)"></a>
        <div id="rateresult-<?=$myrow3["id"]?>"><?=$myrow3['up']-$myrow3['down']?></div>
        <a class="rate minus" id="pid_<?=$myrow3["id"]?>" href="javascript:void(Минус)"></a>
    </div>

При голосовании идет и проверка по ip, хочу сделать так, чтобы после голосования иконка с плюсиком и минусиком не появилась, а тоько сам результат голосования.

Дело в том, что можно быстро несколько раз кликнуть на рейтинг, пока он сработает.

Хочу таким способом уменьшить риск повторного голосования.

Подскажите кто в курсе как это сделать? СПАСИБО!

@Soldado · 30.01.2013, 22:08

.one('событие', обработчик) - привязывает событие к элементу, но сработает только один раз.

Вместо

Javascript

1	$('.rate').click(function(){

Запишите

Javascript

1	$('.rate').one('click',function(){

2. Вариант - перед обращением к функции - ajax удаляйте элементы

Javascript

1	$('.rate').remove();

@FlyMouse86 · 30.01.2013, 22:26

Javascript

$('.rate').click(function(){
        var _class = $(this).attr('class').split(' ');
        var _id = $(this).attr('id').split('_'); 
        _rating( _id[1], _class[1] );
       $(this).siblings('a.rate').css('display','none');
        return false;
    });

Добавлено через 7 минут
А если уж совсем по-хорошему, обработав клик на сервере, присылаете ответ в виде объекта, который скроет кнопки, отключит обработчик..

@nevai · 30.01.2013, 22:50 **[ТС]**

Спасибо за отзыв, картинка с плюсиком при клике на него остается прячется только минус, а при клике на минус остается минус а + прячется. Что-то не так.

@Soldado · 30.01.2013, 23:58

А мои варианты?

@nevai · 31.01.2013, 00:14 **[ТС]**

Не неподходит! Можно кликать по минусу если кликнул на плюс

@Soldado · 31.01.2013, 00:46

А удаление всех ссылок с классом .rate (мой второй вариант)? Этот класс ведь у обеих ссылок

Javascript

1	$('.rate').remove();

@nevai · 31.01.2013, 10:57 **[ТС]**

Soldado, Тогда убирает у каждого комментария картинки все с +/- остается только результат, может можно както убрать только у того по которому кликнул, привязать както к нему.

@Soldado · 31.01.2013, 11:19

У вас много блоков div class="rating" - в каждом +/- и результат голосования?
Если нет то уточните, если да, то для кликнутого элемента находим родительский блок - в родительском блоке дочерние элементы с классом .rate и удаляем их. Таким образом всё проходит только в пределах кликнутого блока

Javascript

1	$('this').parent('.rating').children('.rate').remove();

@nevai · 31.01.2013, 12:40 **[ТС]**

Soldado, Да каждый блок имеет ид комментария пример написан выше.

Сколько комментариев сколько и блоков. Меняется только

HTML5

1	<a class="rate plus" id="pid_<?=$myrow3["id"]?>" href="javascript:void(Плюс)"></a>

где

PHP

1	<?=$myrow3["id"]?>

Идентификатор комментария так я решил сделать дабы отсортировать комменты и рейтинги.

Добавлено через 5 минут

Сообщение от Soldado

У вас много блоков div class="rating" - в каждом +/- и результат голосования?
Если нет то уточните, если да, то для кликнутого элемента находим родительский блок - в родительском блоке дочерние элементы с классом .rate и удаляем их. Таким образом всё проходит только в пределах кликнутого блока

Javascript

1	$('this').parent('.rating').children('.rate').remove();

Ничего не делает вообще.

Пример где это есть вот http://aydar.pp.ua/posts.php?id=20

@Soldado · 31.01.2013, 14:51

Ошибся я немного - взял this в кавычки.
Нужно

Javascript

1	$(this).parent('.rating').children('.rate').remove();

Это полностью удалит +/- со страницы. Если при этом происходят какие-то сдвиги других элементов, то можно не удалять, а делать невидимыми

Javascript

1	$(this).parent('.rating').children('.rate').css('visibility','hidden');

или так

Javascript

1	$(this).siblings('.rate').andSelf().css('visibility','hidden');

Теперь давайте пройдёмся с самого начала. Я уберу все id и прочее лишнее, что не участвует в удалении +/- И тогда html код будет приблизительно таким

HTML5

<div class="rating">
        <a class="rate plus" href="#">+</a>
        <div>рейтинг</div>
        <a class="rate minus" href="#">-</a>
</div> 
<hr/>
<div class="rating">
        <a class="rate plus" href="#" >+</a>
        <div>рейтинг</div>
        <a class="rate minus" href="#">-</a>
</div>
<hr/>   
<div class="rating">
        <a class="rate plus" href="#">+</a>
        <div>рейтинг</div>
        <a class="rate minus" href="#">-</a>
</div>  
<hr/>

Верно?

Тогда и скрипт только для скрытия (то, что не рассматривается я убрал) будет выглядеть так

Javascript

$('.rate').click(function(){
 
 $(this).parent('.rating').children('.rate').css('visibility','hidden');
    });

Если я всё правильно смоделировал, то всё должно работать и у Вас, как работает на этой демо-странице

@nevai · 31.01.2013, 17:07 **[ТС]**

Во клас благодарю за поддержку
Soldado, сегодня уже перечитал сколько перепробовал и ничего, а теперь то что надо. Выручил!

Добавлено через 30 минут
Теперь буду ломать голову над добавлением комментов на аякс.

@nevai 2 / 2 / 1 Регистрация: 18.01.2013 Сообщений: 34
	30.01.2013, 22:50 [ТС]	4
	Спасибо за отзыв, картинка с плюсиком при клике на него остается прячется только минус, а при клике на минус остается минус а + прячется. Что-то не так. 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	30.01.2013, 23:58	5
	А мои варианты? 1

@nevai 2 / 2 / 1 Регистрация: 18.01.2013 Сообщений: 34
	31.01.2013, 00:14 [ТС]	6
	Не неподходит! Можно кликать по минусу если кликнул на плюс 0

@nevai 2 / 2 / 1 Регистрация: 18.01.2013 Сообщений: 34
	31.01.2013, 10:57 [ТС]	8
	Soldado, Тогда убирает у каждого комментария картинки все с +/- остается только результат, может можно както убрать только у того по которому кликнул, привязать както к нему. 0

@nevai 2 / 2 / 1 Регистрация: 18.01.2013 Сообщений: 34
	31.01.2013, 17:07 [ТС]	12
	Во клас благодарю за поддержку Soldado, сегодня уже перечитал сколько перепробовал и ничего, а теперь то что надо. Выручил! Добавлено через 30 минут Теперь буду ломать голову над добавлением комментов на аякс. 0