Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.03.2016, 06:52
Новичок на форуме
Отправить личное сообщение для pricebody Посмотреть профиль Найти все сообщения от pricebody
 
Регистрация: 17.03.2016
Сообщений: 2

Не получается адаптировать код
Решил на днях ради развлекухи создать онлайн голосовалку, где под каждой фоткой 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() {.
Вот собственно и всё.


Спасибо)
Ответить с цитированием
  #2 (permalink)  
Старый 17.03.2016, 12:08
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от pricebody
Можно, конечно, эту задачу решить на ПХП, но код получается грамозким и тяжелым
Если в таких задачах блокировкой/разрешением будет заведовать клиент, а не сервер, то это не голосование, а кому не лень, тот и ...
Ответить с цитированием
  #3 (permalink)  
Старый 18.03.2016, 20:03
Новичок на форуме
Отправить личное сообщение для виталя Посмотреть профиль Найти все сообщения от виталя
 
Регистрация: 18.03.2016
Сообщений: 4

подскажите как заставить js отличать и нажимать взять заказ это <img src="/media/images/city/14.jpg"/>
</div>
<div class="details">
<ul>
<li>
<b>0.8меняется5 р.</b> /
23 м. 14 с. </li>
<li style="font-size: 11px;">
Туруханская 27меняется / Бабушкина 68 </li>
<li>
Уровень такси не менее <b>4</b>
</li>
<li style="color:green;font-size: 12px;">
20 мменяеться. 18 с. (-12.6%)
</li>
</ul>
<div class="acceptorder">
<button class="button_gray" data-id="1123меняется4534">Взять заказ</button>
</div>
</div>
</div>
<div class="order hackwork-order-wrapper">
<div class="order-ava">
а не вот это <img src="/media/images/city/68.jpg"/>
<div class="special-order-ava-2"></div>
<div class="special-order">
<span><a href="/page/orders">Халтура</a></span>
</div>
</div>
<div class="details">
<ul>
<li>
<b>0.0меняется9 </b> /
2 м. 32 с. </li>
<li style="font-size: 11px;">
Устиновича 56 / меняетсяИндустриальный 1 23 </li>
<li>
Уровень такси не менее <b>4</b>
</li>
<li style="color:green;font-size: 12px;">
2 м. меняется13 с. (-12.6%)
</li>
</ul>
<div class="acceptorder">
<button class="button_gray" data-id="11234588">Взять заказ</button>
</div>
</div>
</div>
<div class="order hackwork-order-wrapper locked">
<div class="order-ava">
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите к js коду, написать html код Modrih Элементы интерфейса 8 16.06.2015 18:08
Как подгрузить код JS динамически? zhurchik Общие вопросы Javascript 22 02.02.2015 14:16
Не получается вставить код js в HTML garmoni Элементы интерфейса 3 05.09.2013 05:56
код нe работает в фаирфохе dadli Javascript под браузер 2 28.01.2012 21:18
Не получается изменить код jquery GoloArt jQuery 1 27.01.2012 10:34