CSS, если html является значением, измените цвет

Question

Извините, что непонятно, что я имею в виду.

В настоящее время при загрузке страницы я получаю ссылки с определенным идентификатором, я проверяю свою базу данных, затем json возвращаю результат в ссылку. Итак, по существу:

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

Становится либо:

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

или

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

То, что я хотел бы сделать, это CSS, или, возможно, при вызове ajax (не идеально), посмотрите на это значение, а затем установите цвет ссылки на зеленый или красный.

Я подумал, что в CSS, возможно, нет дела

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

Есть ли какие-нибудь хитрости для этого? спасибо за ваши ответы

Answer 1

Уверен, что вы не можете проверить значение элемента с помощью простого CSS.В jQuery это будет выглядеть следующим образом:

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

, а затем в CSS вы можете просто найти «включенный» класс по сравнению с «голым» классом переключателя:

.switcher{
    color:red;
}

.switcher.enabled{
    color:green;
}

Answer 2

Возможно, вы ищете псевдоселекторы :active и :focus.

Answer 3

возможно

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

- это шаг в правильном направлении, или, может быть,

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

Answer 4

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

Answer 5

В некоторых случаях

, если с enabled вы имеете в виду

• мышь над ним: используйте CSS a#id:hover{...}
• щелчок мышью : используйте CSS a#id:active{...}
• вы просматриваете содержимое ссылки : вам нужно использовать jQuery для добавления класса после щелчка по ссылке ( если ajax ).или как-то разобрать URL, сопоставить его с href ссылки и добавить к нему класс ( не рекомендуется, хотя .. лучше использовать серверные сценарии .. )

Answer 6

Страница о том, как оформить ссылки с помощью css: http://www.echoecho.com/csslinks.htm

Answer 7

Попробуйте это:

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

Но это не сработает, потому что вы не можете «изменить» гиперссылку html без другого скрипта.Функция change предназначена для использования при вводе текста, как в формах

Надеюсь, я помог.

РЕДАКТИРОВАТЬ: Просто получил то, что вы имели в виду (я думаю).Если включено, вы имеете в виду, что когда указатель мыши находится над ссылкой, псевдокласс css :hover делает это очень хорошо.Проверьте это на Google, вы получите массу результатов