如何在 id 选择器中处理星号 *

Posted 2023-05-09

【中文标题】如何在 id 选择器中处理星号 *

【英文标题】：How to handle an asterisk * in an id selector

【发布时间】：2016-03-29 06:40:37

【问题描述】：

我有 php 代码生成一排按钮供用户单击，每个按钮对应于学生的成绩。 PHP 还生成所需的 jquery，以使按钮单击以随机选择具有该年级的学生：

echo "<div id='targetGradeButtons' class='testing'>Randomly select student with target grade: " ;

foreach ($uniquetarget as $i => $target) 

    echo "<button id='target-$target'>$target</button> " ; // Generate button for randomly selecting students with certain target
    // Create jquery to handle button clicks
    echo "<script>
        $('#target-$target').click(function()

            randomName('target', '$target');
        );
    </script>"  ;



echo "</div>" ;

这适用于大多数年级。但是，它不适用于 A* 成绩。当我将 A* 硬编码为等级时，它的随机名称选择器部分工作正常，所以问题在于上面的代码未能成功选择 #target-A* 按钮。我相信这是因为 * 是一个特殊字符。我该如何解决这个问题？

使用 PHP 函数自动添加转义字符（反斜杠），似乎没有帮助。

【问题讨论】：

在 ID 中加入特殊字符是个坏主意。它们是合法的，但会使在 CSS 和 jQuery 选择器中引用它们变得更加复杂。我建议您先将$target 转换为其他格式。

其他格式是什么意思？以某种方式对其进行编码？

【参考方案1】：

与其为每个 ID 绑定单独的处理程序，我建议您将它们都赋予相同的类，并将单个处理程序绑定到该类。然后它可以从目标元素中获取 ID。

echo "<div id='targetGradeButtons' class='testing'>Randomly select student with target grade: " ;
foreach ($uniquetarget as $i => $target)  
    echo "<button id='target-$target' class='target'>$target</button> " ; // Generate button for randomly selecting students with certain target

echo "</div>" ;

// Create jquery to handle button clicks
echo "<script>
$('.target').click(function()
    randomName('target', this.id.split('-')[1]);
);
</script>"  ;

【讨论】：

这也很好用，稍作调整：<button id='$target'... 总而言之，它似乎比其他答案更整洁

我添加了一个不同的调整。在事件处理程序中拆分 ID。

这只是为了确保唯一的ID吗？实际上，这可能很方便，因为我有更进一步的代码，它做同样的事情，但对于当前成绩而不是目标成绩（所以 id 将是current-$current。

是的，就是这样。

【参考方案2】：

您可以使用Attribute Equals Selector

$('[id=\"target-$target\"')

【讨论】：

不要转义引号。

在php代码中不需要转义吗？

对，没有意识到上下文。

谢谢你，这很好用。我会尽快接受答案。 :)

【参考方案3】：

您可以尝试使用完全 id 匹配选择器。

$('[id="target-A*"]')

例如：https://jsfiddle.net/DinoMyte/1a6mwb13/3/