[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: jQuery скрипт голосования
alex_2017
Пишу я вот скрипт рейтинга (точнее переделываю этот - ссылка). Разница между тем скриптом что по ссылке и моим в том, что у меня на одной странице будет сразу несколько полей для голосования.
Беда у меня вот в чем:
- Cовсем запутался с toggle. Как видно из кода, срабатывает при клике через раз.
- toggle, который переключает текст на картинку во время гет запроса, с каждым кликом на новое поле срабатывает больше на 1 раз (т.е. должен сработать один раз при одном клике, а срабатывает при каждом клике на новое поле на 1 раз больше).

В каждом из блоков <div class="raiting_blank">,<div class="raiting_hover"> и <div class="raiting_votes"> содержаться картинки звезд (в бэкграунде). Блоки наложенны друг на друга.

Запихал все в один hover обработчик для того, чтобы была возможность проверить каждый на куки. Хотелось бы конечно проверять в цикле который расставляет начальное положение звездочек. Если подскажите как буду очень благодарен.

Собственно js код:

   

// div.raiting_votes - текущая оценка
// div.raiting_hover - звездочки при наведении при наведении
// div.block - блок в котором находится изображение и рейтинг звездочки
// в его атрибут id динамически присваивается занчение вида img_1 в котором
// цивра с четвертой строки указывает на id изображения в бд

//Цикл в котором расставляются звездочки
$('.block').each(function(){
var total_reiting =parseInt($(this).find('.raiting_info').text());
var star_widht = total_reiting*16 + Math.ceil(total_reiting);
$(this).find('.raiting_votes').width(star_widht);
var id = $(this).attr('id');
var id_arc = id.substr(4);
});

$('.raiting').hover(function()
{
$(this).find('.raiting_votes, .raiting_hover').toggle();

$(this).mousemove(function(e){
var margin_doc = $(this).offset();
var widht_votes = e.pageX - margin_doc.left;
user_votes = Math.ceil(widht_votes/17);
$(this).find('.raiting_hover').width(user_votes*17)
});

$('.raiting').click(function(){
$(this).parents('.raiting_star').find('.raiting_info p, .raiting_info img').toggle();
var id = $(this).parents('.block').attr('id');
var id_arc = id.substr(4);
var reiting = $(this).parents('.raiting_star').text();
reiting = parseInt(reiting);
$(this).parents('.raiting_star').find('.raiting_votes, .raiting_hover').toggle();
$(this).unbind();
$.cookies.set('img_'+id_arc, 'voice');

$.get(
"raiting.php", {id_arc: id_arc, user_votes: user_votes},
function(data)
{
var obj = eval('('+data+')');
var path ='#img_'+id_arc+' .raiting_star';
$(path).find(".raiting_info p").html(obj.new_ratio+' / '+obj.num_rat);
$(path).find('.raiting_info img, .raiting_info p').toggle();
$(path).find('div.raiting_votes').width((obj.new_ratio)*17);
}
)
});
},
function()
{
$(this).find('.raiting_votes, .raiting_hover').toggle();
});


Код html:
         <div class="raiting_star">
<div
class="raiting">
<div
class="raiting_blank"></div>
<div
class="raiting_hover"></div>
<div
class="raiting_votes"></div>
</div>
<div
class="raiting_info"><img src="load.gif" alt="load"/><p>'.$myrow["ratio"].' / '.$myrow["num_rat"].'</p></div>
</div>



Помогите пожалуйста исправить код. Заранее благодарен.
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.