根据 ID 添加 CSS 类答案

【问题标题】：Add CSS class based on ID根据 ID 添加 CSS 类
【发布时间】：2012-04-14 23:26:32
【问题描述】：

我想知道如何使用 jQuery 根据链接中的 ID 向链接添加 CSS 类。如果 if 语句为真，我不想将 CSS 类“活动”添加到链接中。并不是说如果声明为真，我不想从链接中的类中删除“pFavorite”，我只想添加活动，就像这样 class="pFavorite active" 我还没有加入 jQuery .我希望我的代码仍然能解释我想要实现的目标。

<?php
foreach($statement as $p)
{
    if(array_search($p['id'], explode(",", $_COOKIE['cookie'])))
    {
    ?>
    <script type="text/javascript">
        $("#<?php echo $p['id']; ?>", ".pFavorite").addClass("active");
    </script>
    <a href="#" class="pFavorite" id="<?php echo $p['id']; ?>">IMG HERE</a>
<?php 
    } 
}
?>

【问题讨论】：

如果你是从PHP开始的，为什么不直接通过PHP设置类名呢？你的 jQuery 的问题是你的脚本在对象被渲染之前就已经运行了。 jQuery 找不到它。将 SCRIPT 标签放在锚标签之后。
我同意 DA 的观点，使用 PHP 渲染活动类使您的代码更简单、更集中。或者，如果您真的需要我们 jQuery，您应该将您的 js 代码移动到 $().ready(function() { /* code here */ });
只是我，还是不允许ID全为数字？（好吧，我不知道你的 $p['id'] 里有什么...）
@Runinus 你是对的。 ID 不能以数字开头。

标签： php jquery css class

【解决方案1】：

首先你的 jQuery 选择器是错误的，你的意思可能类似于

$("#<?php echo $p['id']; ?>.pFavorite").addClass("active");

上面将匹配具有特定id的元素和类pFavorite，而您的原始选择器将匹配所有具有类pFavorite的元素，然后查找具有指定id的元素在其中任何一个中，没有找到任何东西（因为目标元素是具有该类的元素之一，而不是后代）。

其次，您不需要类选择器，因为您已经在使用 id 选择器并且 id 是唯一的。所以这将进一步简化为

$("#<?php echo $p['id']; ?>").addClass("active");

最后：为什么要设置类在页面加载jQuery，当你有你需要在PHP端的所有信息？你可以简单地做

if(array_search($p['id'], explode(",", $_COOKIE['cookie']))) {
    // Use htmlspecialchars for all HTML output; you may need to specify
    // additional parameters (see the function documentation)
    printf('<a href="#" class="active pFavorite" id="%s">IMG HERE</a>',
           htmlspecialchars($p['id']));
}

【讨论】：

回复您的第二部分：#myId.myClass 和#myId 不是相同的东西，不要选择相同的元素。有理由指定仅当元素具有特定类时才通过 id 选择元素。此外，这不是 OP 的选择器所做的：他使用参数 2 作为选择器的范围，它更像 $('.pFavorite #someId')。选择器没有“错误”。
@Madmartigan：一般来说，是的。 在这种特定情况下，我们知道元素将具有类 pFavorite，因为我们无条件地设置它。你对选择器的范围是正确的，我误读了参数（将它们视为一个）。
OP 在选择器中有一个逗号。这意味着它正在选择 #myID 和/或 .myClass
老实说，这真是一团糟，我不知道应该发生什么或真正发生了什么。我敢肯定，这整件事有成千上万个更简单的解决方案。 @DA：OP 中的逗号是分隔参数，而不是实际上在选择器中。混合 PHP HTML 和 javascript 的所有噪音很难分辨。
@Madmartigan：仔细阅读后发现原来的选择器确实是错误的（只是出于另一个原因）。编辑答案以反映这一点；感谢您的意见。

【解决方案2】：

为什么不：

<?php
foreach($statement as $p) {
    if(array_search($p['id'], explode(",", $_COOKIE['cookie']))) {
        echo('<a href="#" class="pFavorite active" id="' . $p['id'] . '">IMG HERE</a>');
    } 
}
?>

【讨论】：

【解决方案3】：

<?php
foreach($statement as $p)
{
    if(array_search($p['id'], explode(",", $_COOKIE['cookie'])))
    {
    ?>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#<?php echo $p['id']; ?>.pFavorite").addClass("active");
        });
    </script>
    <a href="#" class="pFavorite" id="<?php echo $p['id']; ?>">IMG HERE</a>
<?php 
    } 
}
?>

【讨论】：

脚本在要匹配的内容之前，所以我们需要document.ready
是一次，而不是 count($statement) 次。顺便说一句。谁说内容不能在a标签前...
javascript 必须在对象被渲染之后出现。只需将脚本放在锚标记之后。或者，如图所示插入文档就绪包装器（尽管循环中的文档就绪语句是多余的）。在任何一种情况下，内联 jQuery 都是一个坏主意。