Применить несколько классов CSS к элементу HTML (jQuery addClass) - PullRequest
Новая
       6

Применить несколько классов CSS к элементу HTML (jQuery addClass)

2 голосов
/ 16 апреля 2009

Учитывая этот HTML: 

<html>
<head>
  <style type="text/css">
    tr.Class1
    {
      background-color: Blue;
    }
    .Class2
    {
      background-color: Red;
    }
  </style>
</head>
<body>
  <table>
    <tr id="tr1">
      <td>Row 1</td>
    </tr>
    <tr id="tr2">
      <td>Row 2</td>
    </tr>
  </table>
</body>
</html>

Ниже приведен сценарий secion. Что будет, когда я нажму на первый ряд? Он останется синим или станет красным? Если он останется синим, как мне заставить его становиться красным, БЕЗ удаления класса Class1 из строки (чтобы я мог удалить класс Class2 позже, и строка вернется к своему первоначальному цвету синего цвета)? 

<script type="text/javascript" language="javascript">

  $(document).ready(function() {
    $("#tr1").addClass("Class1");

    $("tr").click(function() {
      /* clicked tr's should use the Class2 class to indicate selection, but only one should be selected at a time */

      $(".Class2").removeClass("Class2");
      $(this).addClass("Class2");
    });
  });

</script>

Редактировать Я должен сказать - я попробовал это, и это не работает, как ожидалось (в FireFox или IE). Что происходит?

Ответы [ 4 ]

1 голос
/ 16 апреля 2009

Мозилла говорит здесь :

Если то же свойство объявлено в оба правила, конфликт разрешен сначала через специфику, затем в соответствии с порядком CSS деклараций. Порядок занятий в атрибут класса не имеет значения.

Но я не так себя веду.

1 голос
/ 16 апреля 2009

Должен стать красным ... вот почему он называется каскадными таблицами стилей ... новые дополнения к свойствам переопределяют более старые.

0 голосов
/ 16 апреля 2009

Разобрался. Я неправильно изложил свой пример. CSS действительно выглядел так: 

tr.Class1
{
  background-color: Blue;
}
.Class2
{
  background-color: Red;
}

Таким образом, применяется самое конкретное правило, как Мозилла сказал мне здесь :

Если то же свойство объявлено в оба правила, конфликт разрешен сначала через специфику, затем в соответствии с порядком CSS деклараций. Порядок занятий в атрибут класса не имеет значения.

0 голосов
/ 16 апреля 2009

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

 $("tr").click(function() {
  /* clicked tr's should use the Class2 class to indicate selection, but only one  should be selected at a time */

  $(".Class2").removeClass("Class2");
  $(this).toggleClass("Class1");
  $(this).addClass("Class2");
  $(this).toggleClass("Class1");
});

Я не знаю, сработает ли это, но, возможно, это поможет вам разобраться в проблеме.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...