CSS, if html is value, change color

Question

Sorry For being unclear, what I mean is this.

Currently on page load I fetch the links with a certain id, I check my database, then json back the result into the link. So Essentially:

<a href="#" class="switcher" id="Site_Gallery-<?php echo $item->id; ?>">...loading....</a>

Becomes either:

<a id="Site_Gallery-563" class="switcher" href="#">Enabled</a>

or

<a id="Site_Gallery-563" class="switcher" href="#">Disabled</a>

What I would like todo is CSS, or maybe on the ajax call (not ideal) is look at that value and then set the link colour to either green or red.

I figured in CSS there might be away to-do

.switcher='Enabled' {
  color: green;
} .switch='Disabled' {
  color: red;
}

Are there any tricks to-do this? p.s thanks for your answers so far

Answer 1

Try this :

$('a#id').change(function() {
   $(this).css('color', 'green');
});

But it won't work, because you can't "change" a hyperlink html, not without another script. The function change is meant to be used with text input like the ones in the forms

Hope I have helped.

Regards from France ;)

EDIT : Just got what you meant (I think). If by enabled, you mean when your mouse is over the link, the css pseudo-class :hover does that very well. Check it on google, you get tons of results

Answer 2

 val =  $('#toggleElement').val()
  if(val!==''){
   $('#toggleElement').css('color','green')
}

Answer 3

maybe

$('a[enabled]').css('color', 'green');

is a step in the right direction, or maybe

$('a[enabled=true]').css('color', 'green');

Answer 4

Page on how to style links using css: http://www.echoecho.com/csslinks.htm

Answer 5

You might be looking for the :active and :focus pseudo selectors.

Answer 6

Some case

if with enabled you mean

• mouse over it : use CSS a#id:hover{...}
• mouse click : use CSS a#id:active{...}
• you are currently viewing the contents of the link : you need to use jQuery to add a class after the link has been click (if ajax). or somehow parse the url, match it with the href of the link and add a class to it (not recommended though .. better use server side scripts..)

Answer 7

Pretty sure you can't check the value of the element with straight CSS. In jQuery it would look like:

$(function(){
    $(".switcher").each(function(){
        if ($(this).text() == "Enabled"){
            $(this).addClass("enabled");
        } else {
            $(this).removeClass("enabled");
        }
    });
});

and then in the CSS you can just look for the "enabled" class versus a "naked" switcher class:

.switcher{
    color:red;
}

.switcher.enabled{
    color:green;
}