Question

您好我想使用此代码获取ID，（图表0将被ID替换）

var chart = new google.visualization.AreaChart(document.getElementById('chart-0');

来自这个元素

<div id="<?=$graph_id?>" style="width: 100%; height: 200px;"></div>

我使用php来增加值

<?php

        $g = 0;
   while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)){

        $graph_id = 'chart-' .$g;
         $g++;
  ?>

使用div元素，我使用data-target="#<?=$current_id?>检索ID并且工作正常，但如何使用javascript get.documentByID？这一个data-target="#<?=$current_id?>是另一个例子，如何使用<?=$graph_id?>定位get.documentByID

提前谢谢

Answer 1

document.getElementById与预先知道的ID一起使用。

在您的情况下，您可以使用document.querySelector匹配第一个元素，或document.querySelectorAll匹配所有元素。

确实，document.querySelector接受CSS选择器：

document.querySelector('[id^="chart-"]')

表示元素的id以chart-

开头

并解析ID只需删除前缀＆＃34; chart - ＆＃34;如果需要，请致电parseInt：

   const prefix = "chart-";
   const parseId= (fullId) => parseInt( fullId.slice(prefix.length) );
   parseId(
     document.querySelector('[id^="chart-"]').id
   );

＆＃13;

  const parseId= (fullId) => fullId.slice("chart-".length);
   parseId(
     document.querySelector('[id^="chart-"]').id
 );
console.log(
      document.querySelectorAll('[id^="chart-"]')
.length, 
  ' elements has ID starts with "chart-"'
)

console.log('Random ID is ',
   parseId(document.querySelector('[id^=chart-]').id)  
 )

＆＃13;

<div id="chart-1231"></div>

<div id="ch-232"></div>

＆＃13;

Answer 2

问题： php代码在服务器上生成id。客户端不知道php开始的号码或者有多少号码。

可能的解决方案：

回复php上的每个id，这意味着你必须将每个id手动编码到代码中，因为你无法在js中循环php代码。
让php在javascript中的数组变量中写入id，这样你就可以遍历它们了。
假设id始终从0开始，因此您可以循环getElementById。

更好的解决方案：

使用不依赖于知道id的代码并动态解析它或仅使用类名。两者都有相同的结果，只有选择器不同。

<html>
<head></head>
<body>
    <div id="chart-0" class="ns-chart" style="width: 100%; height: 200px;"></div>
    <div id="chart-12" class="ns-chart" style="width: 100%; height: 200px;"></div>
    <div id="chart-57" class="ns-chart" style="width: 100%; height: 200px;"></div>
<script>
var chartsById = document.querySelectorAll('*[id^="chart-"]'),
    data = [], // your data
    options = {}; // your options
Array.prototype.slice.call(chartsById).forEach(function( chartDiv, index ) {
    // We don't actually need the id or idnumber here, sicne we just have to use the html element to create the chart.
    // var id = chart.id;
    // var idNumber = chart.id.slice(6);
    var chart = new google.visualization.AreaChart( chartDiv );
    chart.draw( data, options );
});
</script>
</body>
</html>

这里的优点是：

你有多少图表并不重要。
或者ids开始的数字。
或者ids中是否存在空白。
分离javascript和php代码。

仅限PHP版本：这些PHP代码段仅作为示例，这不是一个好的代码。代码也可能无法100％工作，因为我不是php程序员。只是想表明差异和问题。

<html>
<head></head>
<body>
<script>
<html>
<head></head>
<body>
<?php
    $g = 0;
    while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {
        $graph_id = 'chart-' .$g;
        echo '<div id="'.$graph_id.'" class="ns-chart" style="width: 100%; height: 200px;"></div>';
        echo '<script>var chart-'.$g.' = document.getElementById("'.$graph_id.'");</script>'
        $g++;
    }
?>
</body>
</html>
</body>
</html>

不同的版本，不那么糟糕，但同样令人讨厌。

<html>
<head></head>
<body>
<script>
<html>
<head></head>
<body>
<?php
    $g = 0;
    $ids = '[';
    while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {
        $graph_id = 'chart-' .$g;
        echo '<div id="'.$graph_id.'" class="ns-chart" style="width: 100%; height: 200px;"></div>';
        $ids.'"'.$graph_id.'",'
        $g++;
    }
    $ids.'];'
    echo '<script>var idAry = '.$ids.';</script>';
?>
</body>
</html>
</body>
</html>

Javascript从随机ID中获取id

2 个答案: