[英]How to use the same JS for same HTML multiple times
I used this from another stackoverflow question: http://jsfiddle.net/Aapn8/3410/ to create circle progress bars. 我在另一个stackoverflow问题中使用了这个: http : //jsfiddle.net/Aapn8/3410/来创建圆形进度条。
Except when I'm trying to create more then 1, nothing happens how can you clean fix this without copying the JavaScript and change just 1 var. 除非我尝试创建超过1,否则没有任何反应如何清除修复此问题而不复制JavaScript并仅更改1 var。
This is my code: 这是我的代码:
.circleWrapper { width: 250px; float: left; } .circleText {} .circleTextSmall {} #graph div { position: relative; margin: 80px; width: 220px; height: 220px; } #graph canvas { display: block; top: 0; left: 0; } #graph span { color: #555; display: block; line-height: 220px; text-align: center; width: 220px; font-family: sans-serif; font-size: 40px; font-weight: 100; margin-left: 5px; } #graph input { width: 200px; }
<div class="circleWrapper"> <div class="chart" id="graph" data-percent="50"></div> <div class="circleText">HTML/CSS</div> <div class="circleTextSmall">Small text</div> </div> <div class="circleWrapper"> <div class="chart" id="graph" data-percent="45"></div> <div class="circleText">PHP</div> <div class="circleTextSmall">Small text</div> </div>
Put your code inside a function which accepts some way of identifying a particular element, then call that function multiple times. 将代码放在一个函数中,该函数接受某种识别特定元素的方法,然后多次调用该函数。 Here's a fork of that fiddle as a working example:
这是一个小工具的分支作为一个工作的例子:
function startGraph(el) { // turn it into a function which accepts an element
// (Nothing else has changed)
var options = {
percent: el.getAttribute('data-percent') || 25,
size: el.getAttribute('data-size') || 220,
lineWidth: el.getAttribute('data-line') || 15,
rotate: el.getAttribute('data-rotate') || 0
}
var canvas = document.createElement('canvas');
var span = document.createElement('span');
span.textContent = options.percent + '%';
if (typeof(G_vmlCanvasManager) !== 'undefined') {
G_vmlCanvasManager.initElement(canvas);
}
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;
el.appendChild(span);
el.appendChild(canvas);
ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;
var drawCircle = function(color, lineWidth, percent) {
percent = Math.min(Math.max(0, percent || 1), 1);
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
ctx.strokeStyle = color;
ctx.lineCap = 'round'; // butt, round or square
ctx.lineWidth = lineWidth
ctx.stroke();
};
drawCircle('#efefef', options.lineWidth, 100 / 100);
drawCircle('#555555', options.lineWidth, options.percent / 100);
}
Assuming each element has class="chart"
then you can get all the elements and call the function with each one: 假设每个元素都有
class="chart"
那么你可以得到所有元素并用每个元素调用函数:
// Get all charts:
var myCharts=document.getElementsByClassName("chart");
// For each one..
for (var i in myCharts) {
// Start it:
startGraph(myCharts[i]);
}
var els = document.getElementsByClassName("chart"); for(var i=0; i < els.length; i++){ var el = els[i]; var options = { percent: el.getAttribute('data-percent') || 25, size: el.getAttribute('data-size') || 220, lineWidth: el.getAttribute('data-line') || 15, rotate: el.getAttribute('data-rotate') || 0 } var canvas = document.createElement('canvas'); var span = document.createElement('span'); span.textContent = options.percent + '%'; if (typeof(G_vmlCanvasManager) !== 'undefined') { G_vmlCanvasManager.initElement(canvas); } var ctx = canvas.getContext('2d'); canvas.width = canvas.height = options.size; el.appendChild(span); el.appendChild(canvas); ctx.translate(options.size / 2, options.size / 2); // change center ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg //imd = ctx.getImageData(0, 0, 240, 240); var radius = (options.size - options.lineWidth) / 2; var drawCircle = function(color, lineWidth, percent) { percent = Math.min(Math.max(0, percent || 1), 1); ctx.beginPath(); ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false); ctx.strokeStyle = color; ctx.lineCap = 'round'; // butt, round or square ctx.lineWidth = lineWidth ctx.stroke(); }; drawCircle('#efefef', options.lineWidth, 100 / 100); drawCircle('#555555', options.lineWidth, options.percent / 100); }
div { position:relative; margin:80px; width:220px; height:220px; } canvas { display: block; position:absolute; top:0; left:0; } span { color:#555; display:block; line-height:220px; text-align:center; width:220px; font-family:sans-serif; font-size:40px; font-weight:100; margin-left:5px; } input { width: 200px; } span { }
<div class="chart" data-percent="88"></div> <div class="chart" data-percent="78"></div>
You have used the graph
ID twice. 您已使用
graph
ID两次。 You can only use an ID once per document. 每个文档只能使用一次ID。
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
id属性指定HTML元素的唯一ID(该值在HTML文档中必须是唯一的)。
More information on this can be found here . 有关这方面的更多信息,请点击此处 。
Change the ID to something else and change the JS to interact with both elements. 将ID更改为其他内容并更改JS以与这两个元素进行交互。
This can for example be done with getElementsByClassName()
. 例如,这可以使用
getElementsByClassName()
来完成。 This function returns an array of elements instead of a single element. 此函数返回元素数组而不是单个元素。
I think it is best if you wrap all your functionality in a function with the following signature: 我认为最好将所有功能包含在具有以下签名的函数中:
function startGraph(el) {
...
}
and then call the function from this for-loop: 然后从这个for循环中调用该函数:
var elements = document.getElementsByClassName("chart");
var i;
for (i = 0; i < x.length; i++) {
startGraph(elements[i]);
}
More information on that can be found here . 有关这方面的更多信息,请点击此处 。
All you need to do is to define unique ids in your HTML
, and define an array of all your graph elements and loop through the logic, see this as an example: 您需要做的就是在
HTML
定义唯一 ID,并定义所有图形元素的数组并循环逻辑,请参阅此示例:
var elements = [{ 'id': 'graph1' }, { 'id': 'graph2' }]; for (var i = 0; i < elements.length; i++) { var el = document.getElementById(elements[i]['id']); var options = { percent: el.getAttribute('data-percent') || 25, size: el.getAttribute('data-size') || 220, lineWidth: el.getAttribute('data-line') || 15, rotate: el.getAttribute('data-rotate') || 0 } var canvas = document.createElement('canvas'); var span = document.createElement('span'); span.textContent = options.percent + '%'; if (typeof(G_vmlCanvasManager) !== 'undefined') { G_vmlCanvasManager.initElement(canvas); } var ctx = canvas.getContext('2d'); canvas.width = canvas.height = options.size; el.appendChild(span); el.appendChild(canvas); ctx.translate(options.size / 2, options.size / 2); // change center ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg //imd = ctx.getImageData(0, 0, 240, 240); var radius = (options.size - options.lineWidth) / 2; var drawCircle = function(color, lineWidth, percent) { percent = Math.min(Math.max(0, percent || 1), 1); ctx.beginPath(); ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false); ctx.strokeStyle = color; ctx.lineCap = 'round'; // butt, round or square ctx.lineWidth = lineWidth ctx.stroke(); }; drawCircle('#efefef', options.lineWidth, 100 / 100); drawCircle('#555555', options.lineWidth, options.percent / 100); }
div { position: relative; margin: 80px; width: 220px; height: 220px; } canvas { display: block; position: absolute; top: 0; left: 0; } span { color: #555; display: block; line-height: 220px; text-align: center; width: 220px; font-family: sans-serif; font-size: 40px; font-weight: 100; margin-left: 5px; } input { width: 200px; } span {}
<div class="chart" id="graph1" data-percent="88"></div> <div class="chart" id="graph2" data-percent="25"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.