-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();
あなたはjQueryのは、適切なパスで参照されていることを確認しましたか? – mason
あなたのコンソールには何が印刷されますか? –
サブページを読み込んだ後に発生したエラーを貼り付けます。あなたのウェブサイトがサブページのURLを共有している場合も同様です –