Fehler beim Ändern des Stils der Seite mit jquery

Question

Ich verwende jquery-style-switcher.js für die Änderung der Stil einiger Elemente. Wenn ich auf den Farbenstil der Seite klicke ändert sich nicht und in der Quelle dieser Seite hinzugefügt diese Klasse jssError error level0 bis ul Tag, die Farben enthalten. Diese Codes funktionierten auf der HTML-Seite, aber in CMS no! Ich debug diese js-Datei von Chrome und verstehe, wenn diese Js-Datei auf der allgemeinen HTML-Datei runed: ein Ereignis rufen Sie addClickEvents ausgeführt, aber in meiner Website, die diese Vorlage für Skin der Website verwendet: addClickEvents Funktion nicht hingerichtet. Eine Funktion, die addClickEvents wird nennen Funktion

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

In dieser Funktion (init) init: Defaultwert ist nicht definiert !!!!

Warum defaultTheme nicht definiert ist? Wenn Sie diese Frage beantworten können, wird das Problem gelöst.

Github link

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 dieses Abschnitts in meiner Seite:

<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> 

Sie können template sehen, die allgemeine Website ist. Ich benutze diese Vorlage in der Haut für dotnetnuke7 und dieses Problem erschien.

Download My codes

Answer 1

Sie haben es fast geschafft zu arbeiten, nur ein paar Dinge hier zu beheben.

Diese Schritte gelten für die Dateien aus Ihrem Archiv "Download My Codes".

---

Erstens, während Klick auf Farbthema quadratische Symbole Umgang mit Ihren Code wirft dieser Fehler JS:

Uncaught TypeError: Cannot read property 'top' of undefined 

In Ihrem main.js, clickMenu Funktion ändern. Umleiten eines Anrufs an $('html, body').animate unter der Bedingung, dass section definiert werden muss.

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

}; 

---

Zweitens in Ihrer switcher.html, auf der Leitung 799, haben Sie innerhalb #colour-variations Element auf ul (wahrscheinlich absichtlich) "jssError error level0" Klassen links:

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

So diese Klassen entfernen:

<ul> 
... 
</ul> 

---

Und eine letzte Kleinigkeit: hinzufügen, dass <link> irgendwo in den <head>:

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

Es ist erforderlich, für Plugin richtig zu initialisieren. Das Fehlen dieser Zeile war der Grund, warum Sie "jssError error level0" Fehler erhalten haben.

---

Ich habe auch eine .zip with working code gemacht. Ich hoffe es hilft!

Answer 2

Wenn Sie es bei einer Veranstaltung hinzufügen möchten, können Sie dies auch einfach tun.

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

Answer 3

Dies ist setDefaultTheme() Funktion

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

Und das ist, wo defaultThemeId gesetzt

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

Sie auf Ihrem head Sie müssen wie etwas hinzufügen

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

So kann es Ihr Standardthema korrekt einstellen.