Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Присвоить значение цвета в зависимости от значения (https://javascript.ru/forum/misc/76077-prisvoit-znachenie-cveta-v-zavisimosti-ot-znacheniya.html)

ggkettle 02.12.2018 12:35

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

Столкнулся с такой задачкой. Есть PHP файл, в котором через JS при наведение на определенный объект идет подстановка значений из JS.

Строки в PHP:
<div class="floor" id="floor" style="display: none;">
<p>Значение 1</p>
<p>Значение 2</p>
<p>Значение 3</p>
<p>Значение 4</p>
</div>


В самом JS строки отвечающие за подстановку значений:
$('.floor a').mouseover(function() {
	
$('.floor').show();
$('.floor p:nth-child(1)').html('№'+$(this).find('name').data( "znachenie1"));
$('.chooser-floor__tooltip p:nth-child(2)').html($(this).find('name').data( "znachenie2"));
$('.floor p:nth-child(3)').html($(this).find('name').data( "znachenie3"));
$('.floor p:nth-child(4)').html($(this).find('name').data( "znachenie4"));
});
$('.floor a').mouseout(function() {
	$('.floor').hide();
});


Собственно все работает как часы. Но возникла потребность вот в чем:
У znachenie4 есть 3 возможных значения. Хочу в зависимости от значения сделать разные цвета значений. Тобишь: значение1 - color=red и тд. Через css style или через class, без разницы.

По идеи, логика такая: в файле JS указываем условие - если значение 1, то цвет красный и тд. Далее как подставить этот class.

Коллеги, помогите, пожалуйста.

P.S. Через PHP бы без проблем реализовал, но тут подставляются значения динамически из JS.

рони 02.12.2018 12:55

ggkettle,
$('.floor a').mouseover(function() {

$('.floor').show();
$('.floor p:nth-child(1)').html('№'+$(this).find('name').data( "znachenie1"));
$('.chooser-floor__tooltip p:nth-child(2)').html($(this).find('name').data( "znachenie2"));
$('.floor p:nth-child(3)').html($(this).find('name').data( "znachenie3"));
var num = $(this).find('name').data( "znachenie4");
var color = {1 : "red"}[num] || "";
$('.floor p:nth-child(4)').html(num).css("color",color);
});
$('.floor a').mouseout(function() {
	$('.floor').hide();
});

ggkettle 02.12.2018 14:24

Цитата:

Сообщение от рони (Сообщение 499652)
ggkettle,
$('.floor a').mouseover(function() {

$('.floor').show();
$('.floor p:nth-child(1)').html('№'+$(this).find('name').data( "znachenie1"));
$('.chooser-floor__tooltip p:nth-child(2)').html($(this).find('name').data( "znachenie2"));
$('.floor p:nth-child(3)').html($(this).find('name').data( "znachenie3"));
var num = $(this).find('name').data( "znachenie4");
var color = {1 : "red"}[num] || "";
$('.floor p:nth-child(4)').html(num).css("color",color);
});
$('.floor a').mouseout(function() {
	$('.floor').hide();
});

Огромнейшее спасибо. Все заработало как надо)) + к карме


Часовой пояс GMT +3, время: 15:19.