删除空格或替换为自动生成的 ID 标签的下划线

Posted 2023-04-13

【中文标题】删除空格或替换为自动生成的 ID 标签的下划线

【英文标题】：Remove space or replace with underscore of auto generated ID tags

【发布时间】：2021-01-17 11:15:27

【问题描述】：

完全修改我的问题。

我正在使用此代码生成一个 id 标签：

$items.="<h3 id='$heading_old' class='cateory_h' style='width: 100%; display: flow-root; margin: 10px 10px; font-weight: 600; color: #bcd63a;'> $heading_old</a></h3>";

生成这个 html：

<h3 id='Craft Cocktails' class='cateory_h' style='width: 100%; display: flow-root; margin: 10px 10px; font-weight: 600; color: #bcd63a;'> Craft Cocktails</a></h3><div class="beers">

id 中不能有空格。我需要删除它并用下划线替换它。

有没有办法做到这一点？

这不起作用：

document.getElementById("Lighter Beers").id = "Lighter_Beers";

感谢 Nico Bleiler 指出我原来的代码错误！

【问题讨论】：

既然我事先知道类别，有没有办法预先分配他们的id或锚点？

不要在 href 值中使用空格

我试过了，但它没有工作，而是把我带到了主页？

如果你点击一个只有像#test这样的片段的链接，它只会更新它并且不会将你重定向到其他地方

我明白这一点。有没有办法将 id='$heading_old' 转换为将 _ 插入结果中？

【参考方案1】：

要使锚点正常工作，url 中的片段必须与元素的 id 相同。

<a href="#test">Go to Test</a>

如果你点击它，它将更新 URI 片段并滚动到页面上具有 id 的元素

<div id="test">Test</div>

在你的变量上使用urlencode ( string $str ) : string方法

urlencode($heading_old)

并自己编码 a 标签以匹配它们

我检查了你的 a 标签。

您好像用错了撇号。

浏览器更新并更正了您的示例

<a href="“#Craft_Cocktails”">Craft Cocktails</a>

你混合了“和"

<ul class="nav2">
    <li><a href="#Craft_Cocktails">Craft Cocktails</a></li>
    <li><a href="#Darker_Beers">Darker Beers</a></li>
    <li><a href="#Lighter_Beers">Lighter Beers</a></li>
    <li><a href="#Hoppy_Beers">Hoppy Beers</a></li>
    <li><a href="#Wild_and_Sour">Wild and Sour</a></li>
    <li><a href="#Wine_and_Cider">Wine and Cider</a></li>
</ul>

【讨论】：

这就是问题所在。我正在尝试分配一个与 $heading_old 的结果匹配的 id，而我这样做的方式返回了碎片 id。

感谢您的关注！我进行了更改，但它仍然只是将我发送到主页。所以它必须是我分配 id 的方式不正确。

举一个标题的例子，里面有 id，而不是模板版本

我不理解您的建议或问题？对不起

我想知道$heading_old的值，我想知道最终的html是什么。喜欢<div id="test">Test</div>