同じHTMLを同じHTMLで複数回使用する方法

Question

別のstackoverflow質問：http://jsfiddle.net/Aapn8/3410/からこれを使用して円の進行状況バーを作成しました。

1を超えて作成しようとしている場合を除いて、JavaScriptをコピーせずに1 varを変更することなく、これを修正する方法はありません。

これは私のコードです：あなたは二回 IDを使用していた

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

Answer 1

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) { 
 
\t \t percent = Math.min(Math.max(0, percent || 1), 1); 
 
\t \t ctx.beginPath(); 
 
\t \t ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false); 
 
\t \t ctx.strokeStyle = color; 
 
     ctx.lineCap = 'round'; // butt, round or square 
 
\t \t ctx.lineWidth = lineWidth 
 
\t \t 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>

Answer 2

。 IDはドキュメントごとに1回のみ使用できます。

id属性は、HTML要素の一意のIDを指定します（値はHTML文書内で一意でなければなりません）。

さらに詳しい情報はhereです。

IDを別のものに変更し、両方の要素と対話するようにJSを変更します。

これは、例えばgetElementsByClassName()で行うことができます。この関数は、単一の要素の代わりに要素の配列を返します。

は、私はあなたが次のシグネチャを持つ関数にすべての機能をラップしている場合、それが最善だと思う：

function startGraph(el) { 
    ... 
} 

をし、その後から関数を呼び出し、このforループ：

var elements = document.getElementsByClassName("chart"); 
var i; 
for (i = 0; i < x.length; i++) { 
    startGraph(elements[i]); 
} 

詳しい情報その上にはhereがあります。

Answer 3

の関数を使用し

複数回、その関数を呼び出して、特定の要素を識別するいくつかの方法を受け入れる関数内のコードを入れてください。作業例としてHere's a fork of that fiddle：各要素を想定し

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

がclass="chart"、あなたはすべての要素を取得し、それぞれで関数を呼び出すことができますがあります。

// Get all charts: 
var myCharts=document.getElementsByClassName("chart"); 

// For each one.. 
for (var i in myCharts) { 
    // Start it: 
    startGraph(myCharts[i]); 
} 

Answer 4

すべてあなたはユニークのIDを定義することですあなたのHTML、およびロジックを介してすべてのあなたのグラフ要素とループの配列を定義するには、例としてこれを参照してください。

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>