javascript - 按类而不是 ID 获取元素以影响多个项目(HTML Canvas Graphs)

Question

我正在使用 PHP 为使用 HTML5 Canvas 的统计数据创建一个 foreach 循环。现在一切都很好，除了我发现用于创建 Canvas Graph 的 JavaSscript，它通过 id 获取一个元素，因此只能手动定位一个项目，不确定如何更改此代码以定位任何数量由 PhP foreach 循环创建的项目。

这是我在 HTML 元素中找到的 JavaScript(忽略数据属性中的 PhP 变量，它们正在返回数据):

var el = document.getElementById('graph'); // get canvas
        //var el = document.getElementsByClassName("chart");

        var options = {
            percent:  el.getAttribute('data-percent') || 25,
            color: el.getAttribute('data-color') || 0,
            size: el.getAttribute('data-size') || 90,
            lineWidth: el.getAttribute('data-line') || 3,
            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('#eeeeee', 1, 100 / 100);
        drawCircle(options.color, options.lineWidth, options.percent / 100);

<div class="chart" id="graph" data-percent="<?php echo $percentage; ?>" data-color="<?php echo $color; ?>" style="color: <?php echo $color; ?>;"></div>

通过类名获取元素返回错误:Uncaught TypeError: el.getAttribute is not a function

Answer 1

好的，所以 getElementsByClassName 返回一个 NodeList 对象。您需要做的是将它变成一个数组并遍历它的所有元素并为每个元素执行您的代码。这是您的代码应如何工作的最小更改版本:

// Get all the elements with 'chart' class as a NodeList object
var elements = document.getElementsByClassName("chart");

// Turn the NodeList into an array
elements = Array.prototype.slice.call(elements);

// Loop over all the elements
elements.forEach(function (el) {
  var options = {
    percent:  el.getAttribute('data-percent') || 25,
    color: el.getAttribute('data-color') || 0,
    size: el.getAttribute('data-size') || 90,
    lineWidth: el.getAttribute('data-line') || 3,
    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('#eeeeee', 1, 100 / 100);
  drawCircle(options.color, options.lineWidth, options.percent / 100);
});

<div class="chart" data-percent="100" data-color="red" style="color: red;"></div>
<div class="chart" data-percent="30" data-color="red" style="color: red;"></div>

但是，这段代码绝对应该重构。例如，在每次迭代时都声明 drawCircle 函数是没有意义的。

另请阅读 getElementByClassName , 和 forEach .