Решил на днях ради развлекухи создать онлайн голосовалку, где под каждой фоткой 3 кнопки: "3 балла", "4 балла", "5 баллов"
Функционал написал на PHP, верстка на bootstrap, но появилась небольшая проблема не могу реализовать блокировку кнопок
Предположим у меня 3 участницы
Кнопки под первой: id="1", id="2", id="3"
Кнопки под второй: id="4", id="5", id="6"
Кнопки под третьей: id="7", id="8", id="9"
Что я пытаюсь сделать:
При нажатии на кнопку id=1 блокируются все элементы (на 24 часа) у участницы (id=1, id=2, id=3) и к тому же блокируются id="4" и id="7" //Голосовалка из разряда неадекватных
, но, чем сложнее задача, тем интереснее)
Хорошо знаю HTML5, PHP5, CSS3, SQL
Можно, конечно, эту задачу решить на ПХП, но код получается грамозким и тяжелым, в то время как js можно решить эту задачу через куки парой десятков строк кода.
Стыд мне и позор, но JS я не знаю, читаю книги сейчас, а голосовалку хочется закончить в ближайшие 2 дня.
Буду благодарен за любую помощь/код/совет
Что нашел в Google (не получается адоптировать):
Появилась задача - сделать конкурс с защитой от накрутки ip+cookies. Именно конкурс, а не опрос. Готовых решений не нашёл (есть реализация через webform'ы, но мне она показалась тёмным лесом).
За основу взял модуль Vote up/down (поскольку в стандартных функциях проверка по ip там уже есть, так зачем же изобретать велосипед, причём не факт что с круглыми колёсами :) ).
Скажу сразу - делал всё на js+jquery, т.к. с php некоторое время назад пытался сделать то же самое, получалось сложнее и более громоздко. Итак.
Этап первый.
Для голосования за фотографию (или какой либо другой элемент) нам нужна только кнопка vote-up, то есть "+".
Дело за малым - ищем, как к нему подобраться через любой удобный для вас просмотр кода элемента. Каждая такая кнопка имеет класс .up-inactive, который при нажатии меняется на .up-active. Для отслеживания голосов за несколько участников нам необходимо отслеживать id кнопки, но загвоздка в том, что ближайший элемент, который имеет уникальный идентификатор – блок с классом .vud-widget. Считаем уровень вложенности кнопки, относительно этого блока – получился 3. Порывшись в интернетах нашёл метод .parentNode, который позволяет перейти с «активного» элемента на уровень выше. Кнопку мы нашли. Теперь нужно привязать к ней действия.
Этап второй.
Определяем функции для установки и считывания cookies. (найдено на сайте, код не мой).
[JS]
//Просмотреть куки
function getCookie(name) {
var cookie = " " + document.cookie;
var search = " " + name + "=";
var setStr = null;
var offset = 0;
var end = 0;
if (cookie.length > 0) {
offset = cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = cookie.indexOf(";", offset)
if (end == -1) {
end = cookie.length;
}
setStr = unescape(cookie.substring(offset, end));
}
}
return(setStr);
}
//установить куки
function setCookie (name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
[/JS]
Этап третий.
Формируем непосредственно cookies. Логика проста – при нажатии на соответствующую кнопку мы записываем в куки id её родителя (это нам пригодится на этапе запрещения голосования).
[JS]$('.vud-widget .up-score .up-inactive').click(function(){
b=getCookie("test");//смотрим, есть ли уже что-либо в cookie
if (b===null) {a=this.parentNode.parentNode.parentNode.id} //проверяем, если пусто, то сохраняем одно значение id родителя
else {a=this.parentNode.parentNode.parentNode.id+','+b}; //если не пусто, то при помощи конкатенации через запятую (или любой другой удобный для вас разделитель) формируем строку из id'шников кнопок.
setCookie("test", a, "01-Jan-2013 00:00:00 GMT", "/"); //собственно записываем в cookies строку, которая полчилась
});
});[/JS]
Этап четвёртый.
Последний этап. Мы проверяем, записана ли в куки нужная нам строка, разбиваем строку на массив элементов и меняем класс кнопки с .up-inactive на .up-active, дабы запретить голосование.
[JS]if (getCookie("test")!==null) { //Если куки не пустые, то
var ids=getCookie("test"); //присваиваем локальной переменной строку кукисов,
var arr = ids.split(','); //разбиваем её на массив элементов, используя указанный разделитель
len=arr.length; //количество элементов массива
for (var i=0;i<len;i++) {
var elem='#'+arr[i]+'.vud-widget .up-score .vud-link-up div'; //в этом блоке и меняем класс .up-inactive .up-active
if ($(elem).hasClass('up-inactive')) {
$(elem).removeClass('up-inactive');
$(elem).addClass('up-active');
}
}
};[/JS]
Важно, чтобы скрипты были в $(document).ready(function() {.
Вот собственно и всё.
Спасибо)
