2016-08-31 11 views
-3

これは私のJSとjQueryのコードです。私はindex.htmlに取り組んできました。私の問題は、私がサブページ内を移動するときに起こります。実際にはスクリプトが機能しなくなります。すべてがサブページに含まれており、これは私の簡単なメニューです。それは、間違いなくインデックスページに取り組んでいます。サブページでJavaスクリプトが動作しない

更新、私は簡単な円グラフがサブページで使用されていないときにエラーを引き起こしていると考えましたが、エラーを防ぐ方法はわかりません、カウンタがサブページにないときにのみ、ページにない場合はコンテナを探していますか?

この行がエラーの原因となっている:。。。

counterScrollFromTop = $ countersContainer.parent()親()位置()トップ。

! function(a, b) { 
    "object" == typeof exports ? module.exports = b(require("jquery")) : "function" == typeof define && define.amd ? define(["jquery"], b) : b(a.jQuery) 
}(this, function(a) { 
    var b = function(a, b) { 
      var c, d = document.createElement("canvas"); 
      a.appendChild(d), "undefined" != typeof G_vmlCanvasManager && G_vmlCanvasManager.initElement(d); 
      var e = d.getContext("2d"); 
      d.width = d.height = b.size; 
      var f = 1; 
      window.devicePixelRatio > 1 && (f = window.devicePixelRatio, d.style.width = d.style.height = [b.size, "px"].join(""), d.width = d.height = b.size * f, e.scale(f, f)), e.translate(b.size/2, b.size/2), e.rotate((-0.5 + b.rotate/180) * Math.PI); 
      var g = (b.size - b.lineWidth)/2; 
      b.scaleColor && b.scaleLength && (g -= b.scaleLength + 2), Date.now = Date.now || function() { 
       return +new Date 
      }; 
      var h = function(a, b, c) { 
        c = Math.min(Math.max(-1, c || 0), 1); 
        var d = 0 >= c ? !0 : !1; 
        e.beginPath(), e.arc(0, 0, g, 0, 2 * Math.PI * c, d), e.strokeStyle = a, e.lineWidth = b, e.stroke() 
       }, 
       i = function() { 
        var a, c; 
        e.lineWidth = 1, e.fillStyle = b.scaleColor, e.save(); 
        for (var d = 24; d > 0; --d) d % 6 === 0 ? (c = b.scaleLength, a = 0) : (c = .6 * b.scaleLength, a = b.scaleLength - c), e.fillRect(-b.size/2 + a, 0, c, 1), e.rotate(Math.PI/12); 
        e.restore() 
       }, 
       j = function() { 
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(a) { 
         window.setTimeout(a, 1e3/60) 
        } 
       }(), 
       k = function() { 
        b.scaleColor && i(), b.trackColor && h(b.trackColor, b.trackWidth || b.lineWidth, 1) 
       }; 
      this.getCanvas = function() { 
       return d 
      }, this.getCtx = function() { 
       return e 
      }, this.clear = function() { 
       e.clearRect(b.size/-2, b.size/-2, b.size, b.size) 
      }, this.draw = function(a) { 
       b.scaleColor || b.trackColor ? e.getImageData && e.putImageData ? c ? e.putImageData(c, 0, 0) : (k(), c = e.getImageData(0, 0, b.size * f, b.size * f)) : (this.clear(), k()) : this.clear(), e.lineCap = b.lineCap; 
       var d; 
       d = "function" == typeof b.barColor ? b.barColor(a) : b.barColor, h(d, b.lineWidth, a/100) 
      }.bind(this), this.animate = function(a, c) { 
       var d = Date.now(); 
       b.onStart(a, c); 
       var e = function() { 
        var f = Math.min(Date.now() - d, b.animate.duration), 
         g = b.easing(this, f, a, c - a, b.animate.duration); 
        this.draw(g), b.onStep(a, c, g), f >= b.animate.duration ? b.onStop(a, c) : j(e) 
       }.bind(this); 
       j(e) 
      }.bind(this) 
     }, 
     c = function(a, c) { 
      var d = { 
       barColor: "#ef1e25", 
       trackColor: "#f6f6f6", 
       scaleColor: "#dfe0e0", 
       scaleLength: 5, 
       lineCap: "round", 
       lineWidth: 3, 
       trackWidth: void 0, 
       size: 110, 
       rotate: 0, 
       animate: { 
        duration: 1e3, 
        enabled: !0 
       }, 
       easing: function(a, b, c, d, e) { 
        return b /= e/2, 1 > b ? d/2 * b * b + c : -d/2 * (--b * (b - 2) - 1) + c 
       }, 
       onStart: function() {}, 
       onStep: function() {}, 
       onStop: function() {} 
      }; 
      if ("undefined" != typeof b) d.renderer = b; 
      else { 
       if ("undefined" == typeof SVGRenderer) throw new Error("Please load either the SVG- or the CanvasRenderer"); 
       d.renderer = SVGRenderer 
      } 
      var e = {}, 
       f = 0, 
       g = function() { 
        this.el = a, this.options = e; 
        for (var b in d) d.hasOwnProperty(b) && (e[b] = c && "undefined" != typeof c[b] ? c[b] : d[b], "function" == typeof e[b] && (e[b] = e[b].bind(this))); 
        e.easing = "string" == typeof e.easing && "undefined" != typeof jQuery && jQuery.isFunction(jQuery.easing[e.easing]) ? jQuery.easing[e.easing] : d.easing, "number" == typeof e.animate && (e.animate = { 
         duration: e.animate, 
         enabled: !0 
        }), "boolean" != typeof e.animate || e.animate || (e.animate = { 
         duration: 1e3, 
         enabled: e.animate 
        }), this.renderer = new e.renderer(a, e), this.renderer.draw(f), a.dataset && a.dataset.percent ? this.update(parseFloat(a.dataset.percent)) : a.getAttribute && a.getAttribute("data-percent") && this.update(parseFloat(a.getAttribute("data-percent"))) 
       }.bind(this); 
      this.update = function(a) { 
       return a = parseFloat(a), e.animate.enabled ? this.renderer.animate(f, a) : this.renderer.draw(a), f = a, this 
      }.bind(this), this.disableAnimation = function() { 
       return e.animate.enabled = !1, this 
      }, this.enableAnimation = function() { 
       return e.animate.enabled = !0, this 
      }, g() 
     }; 
    a.fn.easyPieChart = function(b) { 
     return this.each(function() { 
      var d; 
      a.data(this, "easyPieChart") || (d = a.extend({}, b, a(this).data()), a.data(this, "easyPieChart", new c(this, d))) 
     }) 
    } 
}); 

var $window = $(window); 

var $pb = $('.c-counter__progress-bar').parent(), 
    $sb = $('.c-counter__single-bar'), 
    $countersContainer = $('<div class="c-counter__container">'); 
if ($pb.length) { 
    $sb.each(function() { 
     var $text = $(this).children('.c-counter__text').text(), 
      $head = $(this).children('.c-counter__headline').text(), 
      val = $(this).children('.c-counter__bar').data('value'), 
      color = $(this).children('.c-counter__bar').css('background-color'); 

     var $counter = $('<div>', { 
       class: 'c-counter__item' 
      }) 
      .append(
       $('<div>', { 
        class: 'chart', 
        'data-count': val, 
        'data-percent': 100, 
        'data-bar-color': color 
       }) 
       .html($('<span>')), 
       $('<h4>', { 
        class: 'c-counter__headline' 
       }).text($head, $text), 
       $('<p>', { 
        class: 'c-counter__text' 
       }).text($text) 
      ); 

     $counter.appendTo($countersContainer); 
    }); 
    $pb.css('text-align', 'center').append($countersContainer); 


} 

function counter(targetNumber, duration) { 

    var currentNum = 0, 
     beatDuration = duration/targetNumber, 
     $this = $(this); 

    var interval = setInterval(function() { 

     $this.text(++currentNum); 

     if (currentNum >= targetNumber) 
      clearInterval(interval); 

    }, beatDuration) 
} 

function easyPieChart(i) { 

    if ($('.chart').length < i - 1) 
     return; 

    var $currentChart = $('.chart').eq(i), 
     $currentCounter = $currentChart.children('span'), 
     targetNumber = $currentChart.data('count'), 
     animationDuration = 1000; 

    counter.call($currentCounter, targetNumber, animationDuration); 

    $currentChart.easyPieChart({ 
     animate: animationDuration, 
     size: 140, 
     lineWidth: 7, 
     scaleColor: false, 
     lineCap: "", 
     onStop: function() { 
      easyPieChart(++i); 
     } 
    }) 
} 

function initPieChart() { 

    var windowScrollTop = $window.scrollTop(), 
     windowHeight = window.innerHeight, 
     window_2_3_height = windowHeight * (2/3), 
     scrollTopAnd_2_3 = windowScrollTop + window_2_3_height, 
     counterScrollFromTop = $countersContainer.parent().parent().position().top; 

    console.log(
     'windowScrollTop is: ' + windowScrollTop + ', ', 
     'windowHeight is: ' + windowHeight + ', ', 
     'window_2_3_height is: ' + window_2_3_height + ', ', 
     'scrollTopAnd_2_3 is: ' + scrollTopAnd_2_3 + ', ', 
     'counterScrollFromTop is: ' + counterScrollFromTop + ', ' 
    ); 

    if (counterScrollFromTop < scrollTopAnd_2_3) { 

     easyPieChart(0); 

     console.log('easyPieChart initialized'); 

     $window.off('scroll', initPieChart); 
    } 
} 

$window.on('scroll', initPieChart).scroll(); 

enter image description here

+1

あなたはjQueryのは、適切なパスで参照されていることを確認しましたか? – mason

+1

あなたのコンソールには何が印刷されますか? –

+0

サブページを読み込んだ後に発生したエラーを貼り付けます。あなたのウェブサイトがサブページのURLを共有している場合も同様です –

答えて

0

私はちょうどクラスは

するvarカウンタ= $( 'C-カウンターを。')が存在する場合、スイッチケースに確認する必要があり、それを考え出しました。 スイッチ(counter.length){ ケース1: を実行する ..code}

関連する問題