Bootstrap Collapse Error: SyntaxError: The string did not match the expected pattern

Question

正在尝试使用 Bootstrap 5 崩溃。此相同的代码已从类似的页面复制，但行不会展开以显示折叠（隐藏）的行。相反，我在浏览器控制台上收到上述错误。

浏览器的控制台在底部有这些行（我可以点击最上面的行来展开剩余的行，看起来像附图）：

SyntaxError: The string did not match the expected pattern.
querySelector - index.js:64
e - index.js:64
(anonymous function) - collapse.js:317

如果我点击 f 符号后的任何一行，浏览器会将我重定向到“源代码”选项卡到 Bootstrap.

的相关 JS 文件

代码是-不是整页，这是发挥：

<?php
    $x = 1;
    $leadingScore = -100;
    if (isset($leaderboard)) {
        foreach ($leaderboard as $score) {
            $pid = (string) $score['playerId'];
?>

            <div class="collapse">
                <tr data-bs-toggle='collapse' data-bs-target='#<?=$pid?>'>
                    <th scope="row">
                        <?php 
                            if ($leadingScore != $score['score'])
                                echo $x;
                                            
                        ?>
                    </th>

                    <td style="text-align: left;">

                        <?php echo $score['playerName']." (".$score['hcap'].")"; ?>
                                        
                    </td>
                    <td>
                        <?php 
                            echo $score['score'];
                            $leadingScore = $score['score'];
                        ?>
                    </td>
                    <td>
                        <?php 
                            echo $score['thru'];
                        ?>
                    </td>                                       
                </tr>
                
                <tr id='<?=$pid?>' class='collapse'>
                                        
                    <td colspan=4>
                        <table class='table'>
                            <tr>
                                <th class='sub-th' scope='col'></th>
                                <th class='sub-th' scope='col'>1</th>
                                <th class='sub-th' scope='col'>2</th>
                                <th class='sub-th' scope='col'>3</th>
                                <th class='sub-th' scope='col'>4</th>
                                <th class='sub-th' scope='col'>5</th>
                                <th class='sub-th' scope='col'>6</th>
                                <th class='sub-th' scope='col'>7</th>
                                <th class='sub-th' scope='col'>8</th>
                                <th class='sub-th' scope='col'>9</th>
                                <th class='sub-th' scope='col'>TOTAL</th>
                            </tr>
                        </table>
                    </td>
                </tr>
            </div>
        <?php 
            $x++;
            }
            }
        ?>

浏览器源代码中的输出，第 table 行 HTML 是：

<div class="collapse">
    <tr data-bs-toggle='collapse' data-bs-target='#609d0993906429612483cf49'>

可折叠行 HTML 是：

<tr id='609d0993906429612483cf49' class='collapse'>                                 
    <td colspan=4>
        <table class='table'>
        ...

因此它具有从数据库填充的 target 和 id 标签。

Answer 1

如@johansenja 所述，以字符而非整数开头的 div id 解决了问题。

Bootstrap Collapse Error: SyntaxError: The string did not match the expected pattern

Bootstrap Collapse Error: SyntaxError: The string did not match the expected pattern

php

twitter-bootstrap

collapse