Александр Тимофеев

Всё работает.

Скорее всего класс добавляется, но #food2 видимым не становится, потому что вес id гораздо выше класса.

У них используется много полупрозрачных изображений для отдельных ингредиентов.
Вот, например, изображение для начинки "шампиньоны" 500600.ru/images/ingridients/shampiniony1.png
Изображения накладываются друг на друга с помощью JS в объекте типа canvas.
Вот так это реализовано в HTML: copi.st/LE8L

Пример реализации: codepen.io/copist/pen/EVayRq

слушать клик по всему дому на протяжении работы всей страницы? классное решение. по-хорошему при открытии меню надо биндить клик на "не меню", а при закрытии бинд этот удалять. да и со стилями тоже не самая лучшая практика. правильнее будет всё таки контролировать это из цсски, классами типа 'active' родителя и по наличию этого класса уже играться со стилями. ах да, на счет хаотичности. '*' это все элементы. включая родителей того по кому ты кликнул. кликаются ВСЕ СРАЗУ. поэтому - если в дереве четное количество родителей - то срабатывает, если не четное - то нет.
Я использую что-то такое

$(".sidebar-toggle").on('click', function(){ // клик по кноке открытия
    var h = $("aside.sidebar") //блок который должен открываться
    if($(this).is('.active')) { // если кликнутое меню уже открыто - закрываем
      $(this).removeClass("active"); //удаляем подсвечивание открытого меню
      h.removeClass("active"); //закрываем
      $(document).unbind('.closeMobileMenu'); // удаляем бинд закрытия меню
    } else {
      $(this).addClass("active"); //подсвечиваем открытое
      h.addClass("active"); //открываем
      $(document).bind('touchend.closeMobileMenu click.closeMobileMenu', function(e) { //событие клик по документу
        if (!h.is(e.target) && $(e.target).closest(h).length === 0 && !$(".sidebar-toggle").is(e.target)) { //если это не тот блок, что показывается
          $(".sidebar-toggle").click(); //кликаем второй раз что бы закрылось (тут вообще должно быть полноценное закрытие а не второй клик)
        }
      });
    }
    return false;
  });

Начните отсюда

Ну во первых, val - это метод, а не свойство! И i в вашем случае будет равна чему-то такому:
$(".schetchik>input").val // = functiоn val(){...}

Во вотрых, i нужно привести к числовому типу, так как значение поля - строка.

Ну, и в третьих, с помощью val можно и присвоить значение тоже.

$(document).ready(function() {
      var e = $(".schetchik > input"),
           i = +e.val();
       $(".schetchik > span").click(function(){
            e.val(++i);
       });
});

$(document).ready(function() {
    var i = $(".schetchik input").val();
    $(".schetchik span").click(function(){
        $(".schetchik input").val(++i);
    });
});

Сделай не i++, а выбранный $('инпут').val(i+1)

Если сайт не очень популярный, то хватит следующих скриптов для исключения возможности проголосовать дважды.

https://github.com/Valve/fingerprintjs2
+
https://github.com/samyk/evercookie/ (перед установкой переименуйте все скрипты, чтобы не блокировались adblock-ом)

Про привязку к ip забудьте.

Их надо сохранять куда-то (в базу) - т.е. одним фронтендом не обойтись. Используются ajax-запросы. Реализация со стороны фронтенда, примерно такая:

$('#like').click(function(e)
    {
        $.post
            ....
    });

А на бекенде уже обрабатывайте и проверяйте IP на дубликаты - зависит от выбранной платформы. Кстати если проверять по IP - все пользователи за NAT-ами не смогут ваши лайки использовать нормально.

Это делается на сервере.

В таких нет) делать работу на своей машине исходники не отдавать до полной оплаты, других вариантов нет, только если скрипт самоуничтожения))))

Примерно лет 10 назад, помню было .html .css .js

Сейчас же, весь этот "девелоперский" антураж в виде фреймворков для фреймворков для запуска фреймворков с кучей json конфигов, с пафосным названием и флэт логотипом : )

Договор и акт сдачи приемки, если есть ИП. Если нет ИП, то как уже сказали выше - демонстрация на своем хостинге и передача всех данных только после оплаты.