0

I wonder how I can add a CSS class to a link based on the ID in the link, with jQuery. I wan't to add the CSS class "active" to the link if the if-statement is true. Not that I dont want to remove "pFavorite" from class in link if the statement is true, I just want to add active to, like this class="pFavorite active" Im not that in to jQuery yet. I hope my code still explains what I want to achieve.

<?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 
    } 
}
?>
Improve this question
4
  • 3
    If you are using PHP to begin with, why not set the class name directly via PHP? The problem with your jQuery is that you have the script running before the object is even rendered. jQuery can't find it. Put the SCRIPT tag AFTER the anchor tag. Commented Apr 14, 2012 at 23:30
  • I agree with DA, using PHP to render the active class make your code simpler and more centralized. Alternatively, if you really need to us jQuery you should make your move your js code into $().ready(function() { /* code here */ }); Commented Apr 14, 2012 at 23:31
  • is it just me, or isnt it allowed to have an ID to be all numeric ? (ok i dont know whats in your $p['id']...) Commented Apr 14, 2012 at 23:39
  • @Runinus you are correct. An ID can not begin with a number. Commented Apr 14, 2012 at 23:46

3 Answers 3

Reset to default
4

First of all your jQuery selector is wrong, you probably meant something similar to

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

The above will match the element with the specific id and the class pFavorite, while your original selector would match all elements with the class pFavorite and then look for the element with the specified id inside any of those, not finding anything (because the target element is one of those having the class, not a descendant).

Second, you don't need a class selector since you are already using an id selector and ids are meant to be unique. So that would be further simplified to

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

Finally: why do you want to set the class after the page loads with jQuery, when you have all the information you need on the PHP side? You can simply do

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']));
}
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

In reply to your second part: #myId.myClass and #myId are not the same thing and do not select the same elements. There are reasons to specify that you want to select an element by id only if it has a certain class. Also, that is not what OP's selector does: he's using arugment 2 for the scope of the selector, it's more like $('.pFavorite #someId'). The selector is not "wrong".
@Madmartigan: Generally, yes. In this specific case, we know the element is going to have the class pFavorite because we are unconditionally setting it. You are right about scoping the selector, I misread the parameters (saw them as one).
The OP has a comma in the selector. That means it's selecting #myID and/or .myClass
Honestly, it's such a mess I can't tell what's supposed to happen or what's really going on. I'm sure there are thousands of simpler solutions to this whole thing. @DA: The comma there in the OP is separating arguments, not actually in the selector. Hard to tell with all the noise from mixing PHP HTML and javascript.
@Madmartigan: After careful reading it turns out that the original selector was indeed wrong (just for another reason). Edited the answer to reflect that; thank you for the input.
|
0

Why not:

<?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>');
    } 
}
?>

?

Improve this answer

Comments

-1 
<?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 
    } 
}
?>
Improve this answer

3 Comments

the script is before the content to match so we need document.ready
yes one time, not count($statement) times. and btw. who says the content can not be befor the a tag...
The javascript has to come AFTER the object being rendered. Simply place the script after the anchor tag. Alternatively stick in a document ready wrapper as shown (though the document ready statement in a loop is redundant). In either case, inline jQuery is a bad idea to begin with.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.