Не выполняется всего лишь один toggleClass, как быть?

Question

[Danila Ermolenko]

Суть вопроса: верстал навигацию на одном локальном сервере. Финальный вариант перенес на рабочий локальный сервер. Но на первом все переключатели классов работают, а на рабочем - не работает один из переключателей. Код тот же самый, абсолютно. Единственное, что было разное - на резервной локалке был препроцессор Sass, а потом прописывал под Scss. Но переписал все точно (вроде).

Скрин кода, для наглядности, что все одинаково:


Js на резервном сервере:

'use strict';
/* global $ */

var button = '#btnMenu',
    header = '.header',
    subHeader = '.subheader';

$(document).ready(function() {
  $(button).on('click', function() {
    $(button).toggleClass('toggleColor');
    $('.make-poster-icon').toggleClass('toggleColor');
    $(header).toggleClass('show-header');
    $(subHeader).toggleClass('show');
    $('.logotype-label__whatt').toggleClass('fill');
    $('.logotype-label__other').toggleClass('fill');

  });
});

$(window).resize(function() {
  var windowWidth = $(this).width();

  if (windowWidth >= 768) {
    $(header).removeClass('show-header');
    $(subHeader).removeClass('show');
    $(button).removeClass('toggleColor');
    $('.make-poster-icon').removeClass('toggleColor');
    $('.logotype-label__whatt').removeClass('fill');
    $('.logotype-label__other').removeClass('fill');
  }
});

Js на основном сервере:

'use strict';
/* global $ */

var button = '#btnMenu',
    header = '.header',
    subHeader = '.subheader';

$(document).ready(function() {
  $(button).on('click', function() {
    $(button).toggleClass('toggleColor');
    $('.make-poster-icon').toggleClass('toggleColor');
    $(header).toggleClass('show-header');
    $(subHeader).toggleClass('show');
    $('.logotype-label__whatt').toggleClass('fill');
    $('.logotype-label__other').toggleClass('fill');

  });
});

$(window).resize(function() {
  var windowWidth = $(this).width();

  if (windowWidth >= 768) {
    $(header).removeClass('show-header');
    $(subHeader).removeClass('show');
    $(button).removeClass('toggleColor');
    $('.make-poster-icon').removeClass('toggleColor');
    $('.logotype-label__whatt').removeClass('fill');
    $('.logotype-label__other').removeClass('fill');
  }
});

SVG та же самая. Скопировал из резервного и тупо вставил на основной.

И вот сам результат:

Comments

[frontender]

в консоли есть что нибудь?

[Danila Ermolenko]

frontender: предупреждения абсолютно те же самые, что и на резервном (и то, эти предупреждения из-за сервака локального)

[frontender]

надо дебажить)

[Danila Ermolenko]

frontender: самое фиговое, что все ну абсолютно то же самое. Разница лишь в том, что сначала писал на основном, но чтобы не испоганить написанный код - создал с теми же плагинами второй сервак, а потом вернулся на основной и тут &*%#$ :D

[frontender]

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

[Danila Ermolenko]

frontender: в том то и заключается вся загвоздка - работает полностью точно также код, как и на резервном, но вот не выполняется toggleClass, который отвечает за добавление / удаление класса fill

[Danila Ermolenko]

frontender: noose.cc - залил на сайт

[frontender]

почему у теюя запятые стоят, вместо точек-с-запятыми ?

[Danila Ermolenko]

frontender: там где объявление переменных?

[frontender]

нет: SSMaker.ru/ab9140c6

[Danila Ermolenko]

frontender: а вот это уже интересно

[Danila Ermolenko]

frontender: видимо сборщик выпендривается

[Danila Ermolenko]

frontender: хотя опять же, если бы код не работал, то он бы не работал. А тут он выполняется не до конца

[frontender]

дк потому что первая конструкция до запятой отрабатывает, а после уже нет. синтаксическая ошибка ведь. попробуй не сжимать

[Danila Ermolenko]

frontender: https://youtu.be/ExHe8aZ2hiI

[Danila Ermolenko]

frontender: обрабатываются без проблем все действия, но вот последние два - нифига. Обрабатываются и в том числе, которые стоят до запятой

[Danila Ermolenko]

frontender: иссякли мысли? :(

[frontender]

я скопировал код шапки с сайта, стили с сайта и ваш второй JS, и у меня все работает: https://jsfiddle.net/kvLypttg/

[Danila Ermolenko]

frontender: очень интересно. У меня тоже работает =/

[frontender]

проблема в веб-сервере скорее всего. что используешь? apache?

[frontender]

так, нет. попробуй добавлять класс не через toggleClass, а через attr

[Danila Ermolenko]

frontender: я поднимаю проект на Yeoman. Он автоматом поднимает мне сервак для front-end'а.
Сейчас попробую

[Danila Ermolenko]

frontender: решил проблему другим способом (плохим, знаю). Просто поменял при клике атрибут background-image :D

Answer 1

[Serdji]

Попробуйте вставить вот этот код

$(function() {

	var $button = $('#btnMenu'),
	    $header = $('.header'),
	    $subHeader = $('.subheader');

	  $button.on('click', function() {
	    $button.toggleClass('toggleColor');
	    $('.make-poster-icon').toggleClass('toggleColor');
	    $header.toggleClass('show-header');
	    $subHeader.toggleClass('show');
	    $('.logotype-label__whatt').toggleClass('fill');
	    $('.logotype-label__other').toggleClass('fill');

	  });

	$(window).resize(function() {
	  var windowWidth = $(this).width();

	  if (windowWidth >= 768) {
	    $header.removeClass('show-header');
	    $subHeader.removeClass('show');
	    $button.removeClass('toggleColor');
	    $('.make-poster-icon').removeClass('toggleColor');
	    $('.logotype-label__whatt').removeClass('fill');
	    $('.logotype-label__other').removeClass('fill');
	  }
	});
});

Если не сработает, возможно дело в делегирование

$(function() {

	var $button = $('#btnMenu'),
	    $header = $('.header'),
	    $subHeader = $('.subheader');

	  $(document).on('click', $button, function() { // не много изменить тут
	    $button.toggleClass('toggleColor');
	    $('.make-poster-icon').toggleClass('toggleColor');
	    $header.toggleClass('show-header');
	    $subHeader.toggleClass('show');
	    $('.logotype-label__whatt').toggleClass('fill');
	    $('.logotype-label__other').toggleClass('fill');

	  });

	$(window).resize(function() {
	  var windowWidth = $(this).width();

	  if (windowWidth >= 768) {
	    $header.removeClass('show-header');
	    $subHeader.removeClass('show');
	    $button.removeClass('toggleColor');
	    $('.make-poster-icon').removeClass('toggleColor');
	    $('.logotype-label__whatt').removeClass('fill');
	    $('.logotype-label__other').removeClass('fill');
	  }
	});
});

Comments

[Danila Ermolenko]

Тоже не работает -_-
У меня вообще такое ощущение, что проблема в SVG. Хотя я тупо скопипастил.

[Danila Ermolenko]

noose.cc - залил на сайт