Блог

Главная - Вопросы по программированию - Как изменить цвет числа, если значение уменьшается или увеличивается?

Как изменить цвет числа, если значение уменьшается или увеличивается?

#javascript #jquery

#javascript #jquery

Вопрос:

введите описание изображения здесь

Я хотел бы изменить красный цвет числа, если значение меньше -15, или нужно изменить зеленый цвет, если значение равно 15

Объявление также, пожалуйста, дайте мне знать, можем ли мы изменить промежуточный цвет, то есть>15 и <20

Могу ли я это сделать?

Спасибо

Комментарии:

1. Все хорошо. что вы пробовали?

2. Аналогичным образом, я рекомендую вам, по крайней мере, добавить псевдокод.

3. нет, это psd-дизайн. Мой код jquary не работает. Вы можете мне помочь?

4. Покажите нам свой код «jquary».

5. Если это происходит при загрузке страницы, это очень просто. При загрузке страницы добавьте / удалите класс css на основе диапазона.

Ответ №1:

Просто добавьте класс в зависимости от оценки

ДЕМОНСТРАЦИЯ

HTML:

 <table>
    <tr>
        <th>#</th> 
        <th id="positive">Positive</th>
        <th>Negative</th>
        <th>Avg. Rating</th>
    </tr>
    <tr>
        <td>12</td>
        <td>8</td>
        <td>4</td>
        <td>4</td>
    </tr>
    <tr>
        <td>12</td>
        <td>8</td>
        <td>4</td>
        <td>4</td>
    </tr>
    <tr>
        <td>12</td>
        <td>8</td>
        <td>4</td>
        <td>4</td>
    </tr>
    <tr>
        <td>12</td>
        <td>8</td>
        <td>4</td>
        <td>4</td>
    </tr>  
    <tr>
        <td>20</td>
        <td id="positiveScore">13</td>
        <td>22</td>
        <td>4.5</td>
    </tr>    
</table>

CSS:

 .red {
    color: red;
}

.green {
    color: green;
}

.blue {
    color: blue;
}

jQuery:

 $("#positive").addClass((parseInt($("#positiveScore").text()) >= 15) ? 'green' : (parseInt($("#positiveScore").text()) <= -15) ? 'red' : 'blue');

Комментарии:

1. И если значения меняются, не забудьте добавить . жить после селектора.

2. @user3718333 .live устарел. и здесь нет события, поэтому я не вижу, как

3. Этот код будет работать только для одного элемента. Можете ли вы заставить его работать со всеми числами (а также удалить эти уродливые повторения, пожалуйста)?

4. Привет, спасибо за ответ, но мне нужно изменить цвет для номера, а не заголовка. Если число меньше 15, это число должно быть красным. Спасибо

5. Какое число? Будьте конкретны

Метки: