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

Я использую jquery-style-switcher.js для изменения стиля некоторых элементов. Когда я нажимаю на цвет, стиль страницы не меняется, и в источнике этой страницы добавлен этот тег classjssError 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');
        }
    }

В этой функции (инициализация): значение defaultTheme не определено !!!!

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

ссылка на Github

jquery-style-switcher.js:

(function ($) {
    var jStyleSwitcher,
        _defaultOptions = {
            hasPreview: true,
            defaultThemeId: 'jssDefault',
            fullPath: 'css/',
            cookie: {
                expires: 30,
                isManagingLoad: true
            }
        },
        // private
        _cookieKey = 'jss_selected',
        _docCookies = {};

    /*\
    |*|
    |*|  :: cookies.js ::
    |*|
    |*|  A complete cookies reader/writer framework with full unicode support.
    |*|
    |*|  revision #1
    |*|
    |*|  https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
    |*|
    |*|  This framework is released under the GNU Public License, version 3 or later.
    |*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
    |*|
    |*|  Syntaxes:
    |*|
    |*|  * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
    |*|  * docCookies.getItem(name)
    |*|  * docCookies.removeItem(name[, path[, domain]])
    |*|  * docCookies.hasItem(name)
    |*|  * docCookies.keys()
    |*|
    \*/
    _docCookies = {
        getItem: function (sKey) {
            if (!sKey) {
                return null;
            }
            return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
        },
        setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
            if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) {
                return false;
            }
            var sExpires = "";
            if (vEnd) {
                switch (vEnd.constructor) {
                    case Number:
                        sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
                        break;
                    case String:
                        sExpires = "; expires=" + vEnd;
                        break;
                    case Date:
                        sExpires = "; expires=" + vEnd.toUTCString();
                        break;
                }
            }
            document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
            return true;
        },
        removeItem: function (sKey, sPath, sDomain) {
            if (!this.hasItem(sKey)) {
                return false;
            }
            document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
            return true;
        },
        hasItem: function (sKey) {
            if (!sKey) {
                return false;
            }
            return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
        },
        keys: function () {
            var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
            for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) {
                aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]);
            }
            return aKeys;
        }
    };

    jStyleSwitcher = function ($root, config) {
        return this.init($root, config);
    };

    jStyleSwitcher.prototype = {

        /**
         * {Object} DOM reference to style option list
         */
        $root: null,

        /**
         * {Object} configs for the style switcher
         */
        config: {},

        /**
         * {Object} jQuery reference to <link> tag for swapping CSS
         */
        $themeCss: null,

        /**
         * {String} default theme page was loaded with
         */
        defaultTheme: null,

        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');
            }
        },

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

        resetStyle: function() {
            this.updateStyle(this.defaultTheme);
        },

        updateStyle: function(newStyle) {
            this.$themeCss.attr('href', newStyle);
        },

        getFullAssetPath: function(asset) {
            return this.config.fullPath + asset + '.css';
        },

        checkCookie: function () {
            var styleCookie;
            // if using cookies and using JavaScript to load css
            if (this.config.cookie && this.config.cookie.isManagingLoad) {
                // check if css is set in cookie
                styleCookie = _docCookies.getItem(_cookieKey);
                if (styleCookie) {
                    newStyle = this.getFullAssetPath(styleCookie);
                    // update link tag
                    this.updateStyle(newStyle);
                    // update default ref
                    this.defaultTheme = newStyle;
                }
            }
        },

        addHoverEvents: function () {
            var self = this;
            this.$root.find('a').hover(
                function () {
                    var asset = $(this).data('theme'),
                        newStyle = self.getFullAssetPath(asset);
                    // update link tag
                    self.updateStyle(newStyle);
                },
                function () {
                    // reset link tag
                    self.resetStyle();
                }
            );
        },

        addClickEvents: function () {
            var self = this;
            this.$root.find('a').click(
                function () {
                    var asset = $(this).data('theme'),
                        newStyle = self.getFullAssetPath(asset);
                    // update link tag
                    self.updateStyle(newStyle);
                    // update default ref
                    self.defaultTheme = newStyle;
                    // try to store cookie
                    if (self.config.cookie) {
                        _docCookies.setItem(_cookieKey, asset, self.config.cookie.expires, '/');
                    }
                }
            );
        }
    };

    $.fn.styleSwitcher = function (options) {
        return new jStyleSwitcher(this, $.extend(true, _defaultOptions, options));
    };
})(jQuery);

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 и появилась эта проблема.

Загрузить мои коды


person hmahdavi    schedule 25.12.2015    source источник
comment
Разместите код фрагментом (см. иллюстрацию), jsFiddle.net, PenCode.io, или Plnkr.co Кроме того, вы должны обратиться к это и то   -  person zer00ne    schedule 25.12.2015
comment
Включите также свои цветовые темы style.css, pink.css ... green.css   -  person zer00ne    schedule 25.12.2015
comment
Также нужен файл default.css. У вас есть проблемы с этим плагином, который переключает стили, но вы вообще не предоставляете CSS. Какие правила есть у этих классов? jssError, error, level0, colour-variations, option-toggle и т. д. Это изображение ничего не показывает нам о базовом коде.   -  person zer00ne    schedule 25.12.2015
comment
Теперь вы можете увидеть общий шаблон. Я использую этот шаблон на своем веб-сайте, который находится на локальном хосте и dnn7 cms.   -  person hmahdavi    schedule 26.12.2015
comment
Я думаю, что проблема заключается в пути к файлам css, потому что я использую этот шаблон в оболочке CMS. Я обсуждал на этой странице ( stackoverflow.com/questions/34455685/ ), но не решить.   -  person hmahdavi    schedule 26.12.2015
comment
Вы пробовали решения от Monty и Бхавин Соланки? Разве вы не сможете использовать этот плагин без правильной ссылки на ваш путь?   -  person zer00ne    schedule 26.12.2015
comment
Не могли бы вы создать каталог, а затем поместить туда свои активы? Вы должны иметь возможность ссылаться на папку ресурсов, которая находится везде, где находится ваша веб-страница. Dotnuke полностью отличается от того, что я думаю?   -  person zer00ne    schedule 26.12.2015
comment
Если я хочу изменить полный путь с помощью windows.location или базового URL-адреса href: Как изменить jquery-style-switcher.js?   -  person hmahdavi    schedule 26.12.2015
comment
Давайте продолжим обсуждение в чате.   -  person zer00ne    schedule 26.12.2015


Ответы (3)


У вас почти все получилось, осталось исправить несколько моментов.

Эти шаги относятся к файлам из архива «Скачать мои коды».


Во-первых, при обработке кликов по квадратным значкам цветовой темы ваш код выдает эту ошибку 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 с рабочим кодом. Надеюсь, поможет!

person fyodorananiev    schedule 30.01.2016

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

$(".first").click(function() {
    $(this).addClass("second");
});
person RezaGhahari    schedule 05.04.2016

Это 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}" />

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

person Đào Minh Hạt    schedule 06.03.2017