Ошибка изменения стиля страницы с помощью jquery

Я использую jquery-style-switcher.js для изменения стиля некоторых элементов. Когда я нажимаю на стиль цветов страницы, это не изменяется, и в источнике этой страницы добавлен этот тег jssError error level0 to ul этого класса, который содержит цвета. Эти коды работали на HTML-странице, но в CMS нет! Я отлаживаю этот js файл на chrome и понимаю, что когда этот js файл в общем html файле запущен: событие вызывает его addClickEvents, но на моем веб-сайте, который использовал этот шаблон для скина веб-сайта: addClickEvents не выполняется. Функция, вызывающая addClickEvents, - это функция init

init: function ($root, config) { this.$root = $root; this.config = config ? config : {}; this.setDefaultTheme(); if(this.defaultTheme) { // try cookies if (this.config.cookie) { this.checkCookie(); } // try hover if (this.config.hasPreview) { this.addHoverEvents(); } // finally, add click events this.addClickEvents(); } else { this.$root.addClass('jssError error level0'); } }

В этой функции (init): значение по умолчаниюTheme undefined!!!!

Почему defaultTheme undefined? если вы можете ответить на этот вопрос, проблема будет решена.

jquery-style-switcher.js:

HTML этого раздела на моей странице:

<div id="colour-variations"> <a class="option-toggle"><i class="icon-gear"></i></a> <h3>Preset Colors</h3> <ul class="jssError error level0"> <li><a href="javascript: void(0);" data-theme="style"></a></li> <li><a href="javascript: void(0);" data-theme="pink"></a></li> <li><a href="javascript: void(0);" data-theme="blue"></a></li> <li><a href="javascript: void(0);" data-theme="turquoise"></a></li> <li><a href="javascript: void(0);" data-theme="orange"></a></li> <li><a href="javascript: void(0);" data-theme="lightblue"></a></li> <li><a href="javascript: void(0);" data-theme="brown"></a></li> <li><a href="javascript: void(0);" data-theme="green"></a></li> </ul> </div>

Вы можете увидеть шаблон, который является общим сайтом. Я использую этот шаблон в скинах для dotnetnuke7, и эта проблема появилась.

Ответы

Ответ 1

Вы почти заставили его работать, всего несколько вещей, чтобы исправить это.

Эти шаги относятся к файлам из вашего архива "Загрузка моих кодов".

Во-первых, при обработке щелчка по значкам цветовой темы цвета ваш код вызывает эту ошибку JS:

Uncaught TypeError: Cannot read property 'top' of undefined

В main.js, измените clickMenu функцию. Оберните вызов $('html, body').animate в условии, что section должно быть определено.

var clickMenu = function() {

    $('a:not([class="external"])').click(function(event){
        var section = $(this).data('nav-section'),
            navbar = $('#navbar');

        if(section){ // <- this wrap condition 
            $('html, body').animate({
                scrollTop: $('[data-section="' + section + '"]').offset().top
            }, 2000);
        }

        if ( navbar.is(':visible')) {
            navbar.removeClass('in');
            navbar.attr('aria-expanded', 'false');
            $('.js-fh5co-nav-toggle').removeClass('active');
        }

        event.preventDefault();
        return false;
    });

};

Во-вторых, в вашем switcher.html, в строке 799, вы уехали (возможно, намеренно) "jssError error level0" в класс ul внутри #colour-variations:

<ul class="jssError error level0">
...
</ul>

Поэтому удалите эти классы:

<ul>
...
</ul>

И последнее маленькое: добавьте, что <link> где-то в <head>:

<link type="text/css" rel="stylesheet" id="theme-switch" href="style.css">

Требуется правильная инициализация плагина. Отсутствие этой строки было причиной, по которой вы получили ошибку "jssError error level0".

Я также создал . zip с рабочим кодом. Надеюсь, это поможет!

Ответ 2

Если вы хотите добавить его в событие, вы также можете сделать это легко.

$(".first").click(function() {
    $(this).addClass("second");
});

Ответ 3

Это setDefaultTheme() функция

            this.$themeCss = $('link[id=' + this.config.defaultThemeId + ']');
            if(this.$themeCss.length) {
                this.defaultTheme = this.$themeCss.attr('href');
            }

И здесь defaultThemeId установлен

_defaultOptions = {
            hasPreview: true,
            defaultThemeId: 'jssDefault',
            fullPath: 'css/',
            cookie: {
                expires: 30,
                isManagingLoad: true
            }
        },

На вашем head вам нужно добавить что-то вроде

<link id="jssDefault" href="{your default theme here}" />

Таким образом, он может правильно настроить тему по умолчанию.