引导折叠错误：SyntaxError：字符串与预期的模式不匹配

Posted 2023-03-24

【中文标题】引导折叠错误：SyntaxError：字符串与预期的模式不匹配

【英文标题】：Bootstrap Collapse Error: SyntaxError: The string did not match the expected pattern

【发布时间】：2021-10-22 09:14:39

【问题描述】：

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

浏览器的控制台底部有这些行（我可以单击顶行展开其余行，如下图所示）：

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++;
            
            
        ?>

浏览器源码中的输出，主表行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'>
        ...

因此它具有从 DB 填充的 target 和 id 标记。

【问题讨论】：

请将代码和数据添加为文本 (using code formatting)，而不是图像。图片：A）不允许我们复制粘贴代码/错误/数据进行测试； B) 不允许根据代码/错误/数据内容进行搜索；和many more reasons。除了代码格式的文本之外，只有在图像添加了一些重要的东西，而不仅仅是文本代码/错误/数据传达的内容时，才应该使用图像。

一般来说，我认为有些浏览器不喜欢以数字开头的 id，所以也许可以尝试在 id 前加上一个字母？

@johansenja，我认为你是对的。我从我的工作示例中复制/粘贴了以字符开头的代码，并且它按预期运行。感谢您的贡献

【参考方案1】：

正如@johansenja 所说，以字符而不是整数开头的 div id 解决了这个问题。