Блог

Я пытаюсь изменить цвет фона и текста строки таблицы по щелчку мыши, используя jQuery и CSS, чтобы одновременно можно было выбирать только одну строку. Однако, похоже, я не могу изменить CSS, даже если класс корректно изменяется из функции jQuery, поэтому jQuery, похоже, работает.

Я очень смущен, почему CSS не меняется при изменении класса (что я вижу в представлении элемента проверки в Chrome).

Обратите внимание, что строки таблицы генерируются на странице шаблона Django, а классы div взяты из Bootstrap.

 <div class="row panel panel-default">
  <table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Pass #</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Type</th>
            <th>Active</th>
        </tr>
    </thead>
    <tbody class="member">
        {% for member in filter_list %}
          {% with member.pass_set.all|first as pass %}
            <tr>
                <td>{{member.id}}</td>
                <td>{{pass.active_id}}</td>
                <td>{{member.last_name}}</td>
                <td>{{member.first_name}}</td>
                <td>{{pass.member_type}}</td>
                <td>{{pass.season.is_current|yesno|capfirst}}</td>
            </tr>
          {% endwith %}
        {% endfor %}
    </tbody>
  </table>
</div>
  

 $("tr").click(function() {
    $(this).parent().children().removeClass(".selected");
    $(this).addClass(".selected");
});
  

 .member tr:hover {
    background-color: rgba(41, 103, 182, 0.89);
    color: #FFF;
}
.selected tr{
    background-color: rgba(41, 103, 182, 0.89);
    color: #FFF;
}
  

Я действительно думал, что это будет просто, но я застрял на некоторое время. Заранее спасибо за любую помощь!

Спасибо за все быстрые ответы. В итоге я воспользовался советом всех троих!

Окончательное решение:

 .member tr.selected {
    background-color: rgba(41, 103, 182, 0.89);
    color: #FFF;
}
  

 $("tbody tr").click(function() {
   $(this).addClass('selected').siblings().removeClass("selected");
});
  

Вы добавляете selected класс к tr элементу, поэтому ваш CSS-селектор неверен. Вы также можете сделать его более конкретным, добавив к нему префикс .member . Попробуйте это:

 .member tr.selected {
    background-color: rgba(41, 103, 182, 0.89);
    color: #FFF;
}
  

Кроме того, вы можете изменить свой jQuery, чтобы tr tbody можно было выбирать только элементы внутри — я сомневаюсь, что вы хотите, чтобы люди выбирали строку заголовка:

 $("tbody tr").click(function() {
    $(this).addClass('selected').siblings().removeClass("selected");
});
  

Обратите внимание, что . для методов or не требуется префикс addClass() removeClass() .

Пример скрипки

Вам не нужны методы . in addClass или removeClass . Аналогично, вам не нужен tr ваш CSS для .selected класса, поскольку вы добавляете его в tr элемент…

http://jsfiddle.net/2E9T5/

http://jsfiddle.net/7FbmV/

 No need for dot:

$("tr").click(function() {
  $(this).parent().children().removeClass("selected");
    $(this).addClass("selected");

});
  

Вы не используете .выбранный, только что выбранный, . является селектором класса в css, аналогично тому, как # является селектором идентификатора.

 $("tr").click(function() {
    $(this).parent().children().removeClass("selected");
    $(this).addClass("selected");
});