изменение цвета при клике
 

Добрый день. Помогите разобраться, есть код

<img id="SBookMapImage_<?php echo $_GET['cid']; ?>" src="<?php echo INSTALL_URL . $tpl['arr']['path']; ?>" alt="<?php echo htmlspecialchars(stripslashes($tpl['arr']['map_title'])); ?>" style="margin: 0; border: none; position: absolute; top: 0; left: 0; z-index: 500" />
<?
if(!empty($tpl['price_arr']['price_color']) || !empty($tpl['price_arr']['price_color_hover']) || !empty($tpl['price_arr']['price_color_active'])): ?>
<style>
<? if(!empty($tpl['price_arr']['price_color'])): ?>
    .custom_price_color {
        background-color: #<?=$tpl['price_arr']['price_color']?>;
    }
<? endif; ?>
<? if(!empty($tpl['price_arr']['price_color_hover'])): ?>
    .custom_price_color:hover {
        background-color: #<?=$tpl['price_arr']['price_color_hover']?> !important;
    }
<? endif; ?>
<? if(!empty($tpl['price_arr']['price_color_active'])): ?>
    .custom_price_color:active {
        background-color: red !important;
    }
<? endif; ?>

</style>
<? endif; ?>

<?if(count($tpl['price_color_arr']) != 0):?>
    <style>
        <?foreach ($tpl['price_color_arr'] as $i => $color):?>
        .custom_price_color<?=$i;?> {
            background-color: #<?=$color?> 
        }
        <?endforeach;?>
    </style>
	<?endif;?>
<?if(count($tpl['price_color_hover_arr']) != 0):?>
    <style>
        <?foreach ($tpl['price_color_hover_arr'] as $j => $color_hover):?>
        .custom_price_color<?=$j;?>:hover {
            background-color: #<?=$color_hover?> !important;
        }
        <?endforeach;?>
    </style>
<?endif;?>
<?if(count($tpl['price_color_active_arr']) != 0):?>
    <style>
        <?foreach ($tpl['price_color_active_arr'] as $j => $color_active):?>
        .custom_price_color<?=$j;?>:active {
            background-color: red !important;
        }
        <?endforeach;?>
    </style>
<?endif;?>

<?
foreach ($tpl['seat_arr'] as $seat)
{
	$avail = $seat['seats'] - $seat['booked'];
	?><span onmouseout="UnTip()" onmouseover="Tip('Цена: <?php echo Util::formatCurrencySign(number_format(isset($tpl['custom_arr'][$seat['id']]) ? $tpl['custom_arr'][$seat['id']] : $tpl['price_arr']['price'], 2), $tpl['option_arr']['currency']); ?><br>Место: <?php echo stripslashes($seat['name']); ?><br /><?=@$seat['hint']?>', ABOVE, true, CENTERMOUSE, true, OFFSETX, 0);" rel="<?php echo $seat['id']; ?>" rev="<?php echo $avail; ?>" data-price_id="<?php echo $_GET['price_id']; ?>" data-price="<?php echo Util::formatCurrencySign(number_format(isset($tpl['custom_arr'][$seat['id']]) ? $tpl['custom_arr'][$seat['id']] : $tpl['price_arr']['price'], 2), $tpl['option_arr']['currency']); ?>" data-hint="<?php echo @$seat['hint'];?>" class="custom_price_color custom_price_color<?=$seat['id'];?> sbook-rect sbook-<?php echo (in_array($seat['id'], $tpl['bs_admin_arr_1']) ? "busy-admin" : (in_array($seat['id'], $tpl['bs_arr']) && (int) $avail <= 0 ? 'busy' : 'available')); ?>" style="width: <?php echo $seat['width']; ?>px; height: <?php echo $seat['height']; ?>px; left: <?php echo $seat['left']; ?>px; top: <?php echo $seat['top']; ?>px; line-height: <?php echo $seat['height']; ?>px;"><?php echo stripslashes($seat['name']); ?></span><?php
}
?>

Масив ($tpl['price_color_arr']) меняет цвет используя псевдокласы hover и active. А вот как повесить onclick функцию для изменения цвета при нажатии - не понимаю.
Прошу прощения сразу если что не так - начинающий я

Это чей скрипт, вами писанный или ...?
Массив $tpl['price_color_arr'] ни меняет цвет, он определяет класс, а менять уже будет CSS. Вот только что за скрипт у вас такой, который определяет это в цикле, у вас что N раз получается описано правило для .custom_price_color?
Чтобы щелчком менять, нужно не РНР скрипт рассматривать, а добавлять обработчик в подключаемый JS сценарий.

Не мой. Я разбираю что к чему, учусь можно сказать.Это часть скрипта билетной кассы. Класс - цвет по стоимости. При выделении на схеме зала не выделяется цветом, не понятно что выбрал. Пытался подключить сценарий, что-то никак.
Подскажите в какую сторону копать. Пожалуйста.

Смотрим - условие (которое можно написать проще):

<?if(count($tpl['price_color_hover_arr'])):?>

а дальше получается правила классов

.custom_price_color<?=$i;?>

которые отличаются на значения ключа массива $i. Зачем это писать в условиях, то есть формировать правила стилей - цвета стоимости можно изменять через административный раздел?

Используется ли jQuery на сайте?

Используется ли jQuery на сайте? - да. Стоимость - да, задается из админки - это же вывод информации для пользователя, каждое место имеет свое ИД и ему задается назначенный цвет. Поэтому и получается N раз описано правило для .custom_price_color

Подскажите как, голова пухнет уже

apol775,
попробуйте добавить , как пример

<script>

    $('.price_color_hover_arr').on('click', function (e) {
         this.style.background = this.style.background == ''?'red':''
    })

</script>

Я не об изменении стоимости говорю, ежику понятно, что характеристики товаров задаются через административный раздел, я о цвете спрашиваю. Почему постоянно стили переписываются по условию? Если цвет, то есть стили также можно изменять через админку, тогда понятно, но зачем же стили ворошить по условию, да и не выгодно таким образом поступать.

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

При этом в файле CSS вместо значений правил будут подставляться редактируемые значения стилевых правил из базы. А в элементы, которые используют эти стили добавляется соответствующий класс. И если бы требовалось так же как у вас изменять цвет элемента в зависимости от цены, то элементу прописывается по условию цены соответствующее имя класса, а все правила стилей уже описаны в CSS, тревожить его незачем. Если у вас значения цвета не изменяются в админке, то их нужно прописать единожды в подключаемом CSS, а элементам изменять имена классов. Даже больше, если в зависимостях цена-цвет есть закономерность, то можно описать имена классов так, что никаких условий для указания имени класса элементу по условию цены не потребуется, достаточно будет простой логической операции.

Что касается изменения цвета по щелчку, то установите обработчик на элементы по групповому селектору (jQuery), например:

//в блоке $(function() { .... JQuery
//установить обработчик на элементы
$('class $=price_color_active').click(function() {
   //изменение цвета
})
//.....
//это установка обработчика при условии, что элементы есть на странице при установке обработчика, 
//иначе делегировать обработку ближайшему родителю который присутствует на странице гарантировано

Но, если цвет изменяется при наведении мыши, а нужен еще и по щелчку, то получается, что нужно отметить выбор (?), и если так, то может ли сбросить свой выбор пользователь, то есть вернуть цвет по умолчанию (?), и если да, то значит нужен переключатель цвета. А это можно сделать посредством метода .toggleClass(), добавляя/удаляя класс у элемента. То есть все сводится к тому, что управлять нужно стилями, имея ввиду добавлять нужный класс по условию при выводе сервером, а не потрошить почему-то таблицу стилей, о чем написано выше.

[quote=Mess4me;397895]apol775,
попробуйте добавить , как пример

<script>

    $('.price_color_hover_arr').on('click', function (e) {
         this.style.background = this.style.background == ''?'red':''
    })

</script>

[/QUOT
Может я не там вставляю?
не срабатывает. Спасибо

apol775,
а можете ссылку на сайт дать?

laimas,
как у Вас хватило терпения столько текста написать :)

benefis.co.il

Да, уже за это - СПАСИБО!!!:)

Я согласен - это иррационально, но что есть то есть. Помогите понять, как это реализовать

Вот как у вас формируются селекторы ститлей:

.custom_price_color<?=$j;?> - то есть в итоге будет класс может быть типа custom_price_color_xxx, где xxx изменяемое значение (ключ массива, в котором вы ворошите таблицу стилей). А вам нужно на все элементы установить так ведь? Значит нужно по группе установку делать:

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(function() {
    $('[class ^=custom_price_color]').click(function() {
        alert(this.className)
    })
});
</script>     
</head> 

<body>
<span class="custom_price_color_aaa">Test 1</span>
<span class="custom_price_color_bbb">Test 2</span>
</body> 
</html>

И я не тот селектор написал и некорректно, в примере как надо.

PS. Вы не ответили на вопрос о условиях смены цвета по щелчку, и если так как я предполагаю, то не
this.style.background = this.style.background == '' ? 'red' : ''
а изменяйте класс, зачем же с ними парился сервер, если еще и клиенту цветом заниматься?

То что селектор не тот это я понял, поставил правильный, но эффекта нет. Я догадываюсь, что Вас наверное иногда раздражает тупизна (я про себя:) ) людей задающих вопросы, и я честно уважаю людей пытающихся разжевать все. Вопрос в том, где это вставлять. Третий день ковыряю. Если можно - покажите. Спасибо.

Да, именно на все элементы

ссылка на сайт www.benefis.co.il

Вы бы лучше не ссылку на сайт, а часть исходного html кода страницы показали, где есть элементы с именами классов, которые получаются на сервере, на которые нужно установить обработчик. Если какое-то условие при этом нужно соблюдать, или еще что либо, то описать тоже их.

Иначе по РНР коду не понять конкретно на что именно надо устанавливать, а примеры мной приведенные вы либо не понимаете, либо....

Запустите пример приведенный, он же работает, вот типа такого и вам нужно, только на какие-то Х-классы. К тому же остается неясным вопрос - элементы эти уже присутствуют на странице при ее запросе клиенту, или же они подгружаются динамически Ajax, и если верно второе, то такая установка обработчиков работать не будет, нужно делегировать ее.

В том то и дело. что в виду такой закрученности сложной структуре и работе множества плагинов, я не могу понять откуда ноги растут.
Псевдоклассы active и hover работают, а function click... не могу понять. Для меня сложно.

Нет там никакой закрученности в РНР коде, есть принцип "по пути наименьшего сопротивления". Запросите страницу на которой нужна обработка элементов по щелчку. В контекстном меню браузера выбрать Исходный код страницы. В этом код найти код (часть кода, по которой можно будет понять суть), в котором есть те элементы, на которые нужно установить обработчик и представьте его на форуме. Это разве сложно?

<div id="TBook_OverlayBox_1" class="TBook_OverlayBox" data-height="511" style="width: 720px; left: 261px; top: 48px; display: block; height: 686px;"><div id="TBook_OverlayBoxTop_1" class="TBook_OverlayBoxTop"></div><div id="TBook_OverlayBoxHead_1" class="TBook_OverlayBoxHead"><input type="button" value="Закончить" class="TBook_Button         "></div><div id="TBook_OverlayBoxSeats_1" class="TBook_OverlayBoxSeats" style="display: none;"></div><div id="TBook_OverlayBoxMiddle_1" class="TBook_OverlayBoxMiddle" style="width: 720px; height: 511px;"><img id="SBookMapImage_1" src="http://www.benefis.co.il/bron/app/web/upload/maps/d5812b469e2ba3f11ff932d8212f25f1.jpg" alt="Смоларш Тель-Авив" style="margin: 0; border: none; position: absolute; top: 0; left: 0; z-index: 500">
<style>
    .custom_price_color {
        background-color: #eb0c0c;
    }
    .custom_price_color:hover {
        background-color: #3bd90f !important;
    }

</style>

    <style>
                .custom_price_color632 {
            background-color: #f205f2 
        }
		
                .custom_price_color636 {
            background-color: #f205f2 
</style>			
//и так далее все места\\			
<style>
                .custom_price_color632:hover {
            background-color: #07f703 !important;
        }
		
		
                .custom_price_color636:hover {
            background-color: #07f703 !important;
        }
		
		
                .custom_price_color640:hover {
            background-color: #07f703 !important;
        }			
		</style>
//и так далее все места\\
<span onmouseout="UnTip()" onmouseover="Tip('Цена: 111.00ILS<br>Место: 1<br />2 ряд балкона 1 место', ABOVE, true, CENTERMOUSE, true, OFFSETX, 0);" rel="2060" rev="0" data-price_id="390" data-price="111.00ILS" data-hint="2 ряд балкона 1 место" class="custom_price_color custom_price_color2060 sbook-rect sbook-busy" style="width: 12px; height: 12px; left: 567px; top: 394px; line-height: 12px;">1</span>
<span onmouseout="UnTip()" onmouseover="Tip('Цена: 300.00ILS<br>Место: 47<br />3 ряд 47 место', ABOVE, true, CENTERMOUSE, true, OFFSETX, 0);" rel="837" rev="1" data-price_id="390" data-price="300.00ILS" data-hint="3 ряд 47 место" class="custom_price_color custom_price_color837 sbook-rect sbook-available" style="width: 12px; height: 12px; left: 34px; top: 65px; line-height: 12px;">47</span>
//и так далее все места\\

Это на карте зала непосредственно.
Наверное это не совсем то, код страницы большой

Все нормально, ранее такое надо было привести и пояснить. Например сейчас ясно что там за реальные стили имеются. Как на группу установить обработчик я показывал, но теперь видно, что есть три класса: custom_price_color632, custom_price_color636 и custom_price_color640, у которых изменяется цвет по наведению мыши, а вопрос был именно для них изменять цвет при щелчке (в этой части кода таких элементов нет), но ведь есть еще элементы и с классами: custom_price_color2060 и custom_price_color837, которым не описано в стилях такового изменения цвета, а значит и щелчком изменять его тоже не надо? И если так, то селектор показанный в примере некорректный будет.

Код результирующий выставили, это хорошо, но описывать надо условия для обработчика, действительно ли всем элементам с классом начинающимся на custom_price_color менять цвет или нет? Еще либо какие условия... и т.д., ведь никто же кроме вас не знает и не сможет догадаться что вам надо.

не совсем так, код велик и я показал лишь часть. Дело в том, что custom_price_color не три а N?, где N - количество мест в зале. То есть там идет custom_price_color632, custom_price_color636 .......custom_price_color882, тоже самое с hover.
По щелчку менять на все N custom_price_color.

Ну если их "туева туча", то такое "кодирование", то бишь управление цветом, это полный швах. Я теперь понимаю почему РНР код такой кошмарный - 632, 882 ... и т.д., это ID мест в зале, ну собственно номера их, так?

А как связаны между собой цена и цвет, по каким условиям? Опишите их.

да, это именно ID, Цвет цены назначается через админку: выбираешь места, назначаешь цену и цвет цены соответственно. Что до "кодирование"-я и говорю - бред полный.

Я не спрашиваю где задается цвет, я спрашиваю как связаны место-цвет-цена? У вас что truecolor зал с 16-ю миллионами цветов? Наверное же нет, используются от силы несколько из них, которые определяют группу мест, которые разные по цене, так ведь наверное?
Я уже столько вопросов задал, но еще ответа интересующего и нужного ни разу не получил.
Опишите связь, почему именно одним с наведением мыши изменение цвета, другим нет, чем определяется серо-буро-малиновый для одного места (или мест?), а для других в полосочку?
Вы понимаете о чем вас спрашивают?

при наведении (hover), цвет изменяется всем, не зависимо от категорий. Я так понимаю, что это потому что он (hover), работает с custom_price_color , а там прописано, что взяти все custom_price_colorN, и поменять им цвет при наведении мышкой. Еще раз прошу простить за свое непонимание, на самом деле мне сложно понять. Повторюсь - при наведении - цвет меняет всем на одинаковый, изначально цветов на карте столько, сколько ценовых категорий.

Даже не знаю как еще и задать вопрос, чтобы понятно было.

Что значит цветовые категории? По какому принципу или условию они задаются месту (или группы мест), или же как зависят о цены? Так понятно будет?

при наведении (hover), цвет изменяется всем, не зависимо от категорий

А зачем тогда в стилях указывать .custom_price_color632:hover, то есть конкретные классы, почему не использовать составные?

Задание цветов у вас, это просто какой-то кошмар, который проще и желательно выбросить вообще, чем карпеть над этим бредом. А вопросы и задаю для этого, чтобы понять как это все связано, чтобы найти иное оптимальное решение.

я прекрасно понимаю Ваше удивление, я изначально говорил что это бред, и что сложно разобраться, тем более мне, человеку который, мягко говоря новичок. Почему сделано так как сделано - это вопрос риторический... Есть деятели, считающие такое построение нормой.
\\Что значит цветовые категории? По какому принципу или условию они задаются месту (или группы мест), или же как зависят о цены? Так понятно будет?\\
Задаются прямым выбором, Тип цены -А, места 1,2,3..5,25,30, 35... Цвет -В, Места имеют ИД, номер, и премичание (там указан номер ряда), но это как я понимаю к теме не относится. Главное это ИД. Места на карте зала сразу красятся в выбранный цвет. И все они меняются при наведении на них мышкой. Я так понимаю, что задавать вункцию по смене цвета по клику именно для .custom_price_color в общем. Но проблема в том, что до этого надо выбрать все .custom_price_colorN существующие на карте зала.
Если зайти на мероприятие, выбрать зал, станет видно, как это работает.
то что код изначально бредовый - это я понял. Но мне надо решить это хотя бы временно, писать что то новое нет времени.

Нет понятия о чем я спрашиваю.
Например, цена имеет закономерность - каждая последующая больше предыдущей на 200 руб., и первая равна 200 руб. Цвета в зависимости от цены распределены так: 200 руб. - зеленый, 400 руб. - синий, 600 руб. - красный.
В этом случае городить огород с классами с прицепом идентификатора нет необходимости (такой необходимости в вашем случае вообще нет, каким бы там образом не определялся цвет), и каких-то условий для вывода тоже не надо. Определены классы как: color_1 имеющем зеленый цвет, и соответственно другие классы. Все они сразу прописываются в CSS, а при выводе элементов на страницу указывается соответствующий цене класс, как:

class="color_' .<?=$row['price']/200?>. '"

Либо цвет определяется номером ряда мест, и если между номером места и рядом тоже есть некая закономерность, то также можно автоматом определять класс. Вот о чем я спрашивал - какая зависимость межу цветом/местом/ценой. Ну не сидит же некая Маня, которая сегодня месту 100 назначила розовый цвет, а завтра будет не в настроении и выставит черный. Есть же наверное условия определенные, и цветов у вас не тысячи, и прописывать, причем постоянно, огромные портянки селекторов "уродуемых номерами мест" при выводе, ну это надо писать код "в лоб", чтобы до такого додуматься.

Если иметь множество таких уродливых классов, а затем установить на них обработчик так как вам было показано, а так и придется, то нужно иметь ввиду, что сперва будет браться строка имени класса всех элементов на странице, и затем, путем ее разбора, производится ее сравнение с указанным селектором, потому как селектор задан по условию как часть имени класса. А если еще и оправдывать таковой подход тем, что у пользователей теперь компьютеры мощные, переварят, то это вообще ни в какие ворота.

И можно только представить себе CSS портянку при таком способе.

Понятно, новичок, но не так страшен черт, как его малютки, все мы рождаемся голенькими. И собственно, если hover определен для всех, а это же изменение нужно и по щелчку, то и задача решена - как выбрать элементы, было показано, а что не работает, ну обработчик не на кого ставить (элементы не загружены, говорил об этом, но все осталось без комментариев, так что неизвестность), либо иной баг...

Но не так и сложно "навести порядок" в этом бардаке. Далее простой пример, описывающий все. Так как на вопросы я ответов не получаю, то просто запускайте пример, думайте, решайте сами. Пример с описанием.

Допустим, есть места в зале, и пусть в зависимости от чего-то (так как и у вас, от чего не известно), администратор "раскрашивает" их цветами. Цвет определяется посредством выбора в цветовом круге и записывается в таблицу цветов как его десятичное значение в поле типа INT (в примере имя поля таблицы color_value). При выводе CSS, это значение приводится к виду #XXXXXX. Каждому значению определенного цвета определяется и его имя, которое будет служить классом и сохраняемое в таблице цветов в поле color_name. Каждая такая запись записывается в таблицу под уникальным идентификатором, который позволяет редактировать цвет. Кроме этого эта таблица может содержать значения как флаги определяющие некие индивидуальные условия или действия на клиенте, которые в свою очередь могут быть динамически добавляемые или заранее определенные, а флаг связывает определенный обработчик с цветом. В примере этого нет, есть как пример использования такого цвета - бонус, ну пусть типа рядом с местом таким дама в неглиже подливающая виски в бокал.

Данная таблица цветов определяет все цвета, включая цвет по умолчанию, цвет по наведению и т.п., если все цвета могут редактироваться.

Как уже говорилось, РНР не выводит постоянно эти цвета в блок стилей на странице, этого не надо, из этих цветов формируется подключаемый CSS файл, который изменяется только тогда, когда происходит добавление/изменение цвета в административном разделе. В простейшем случае, при подключении этого файла указывает и GET параметр, как время последнего изменения файла. Поэтому браузер и будет его загружать только тогда, когда добавлен/изменен цвет, иначе он будет использовать ранее кешированный CSS.

Это всё классы управляющие стилями элементов (цветом), а селектор, по которому можно выбрать все элементы (места) к цвету отношения не имеет, он описывает общие для всех стили. В примере это класс seats_hall.

Таблица описывающая объекты (места) не содержит цветов, по умолчанию это поле таблицы (color) имеет значение NULL. Если же месту цвет определен, то в это поле пишется идентификатор соответствующего цвета из таблицы цветов. При выводе объектов на страницу по этому идентификатору вложенным запросом из таблицы цветов получается имя цвета (значение поля color_name). Эти значения (NULL или color_name) добавляются как имя класса элементу, то есть элементы имеют составной класс - один из них, это общий селектор, а второй (если не NULL, иначе цвет по умолчанию) определяет цвет элемента установленный администратором.

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

Пример будет работать на РНР не ниже версии 5.4.

<?
//преобразование десятичного значения цвета в HEX значение
function dec_to_hex($d) {
    $d = base_convert($d, 10, 16);
    return '#' . str_repeat(0, 6 - strlen($d)) . $d;
}
//массив наименований стилей цвета и их значений
//как имитация полученного из базы, редактируемой таблицы цветов
//где ключ - имя цвета из поля color_name и определяющего имя класса,
//а значение - значение цвета из поля color_value
//только в примере они выводятся постоянно
//в реальности, это должен быть подключаемый файл, изменяемый при добавлении/редактировании цвета 
$color = [
    'color_default' => 10066329, //значение по умолчанию - id в таблице базы = 1
    'color_hover' => 12235289, //значение по наведению - id в таблице базы = 2
    'color_2' => 16711680, //красный - id в таблице базы = 3
    'color_3' => 65280, //зеленый - id в таблице базы = 4
    'color_4' => 255 //синий - id в таблице базы = 5
];
//класс цвета для обработки по условию
//который в реальности может определятся через управление
//каким либо флагом 
$bonus = 'color_2';

//это имитация объектов полученных из базы
$objects = [
    ['id'=> 23, 'text'=> 'Text 1', 'price'=> 340, 'color'=> null],
    ['id'=> 12, 'text'=> 'Text 2', 'price'=> 400, 'color'=> 'color_2'],
    ['id'=> 22, 'text'=> 'Text 3', 'price'=> 300, 'color'=> null],
    ['id'=> 33, 'text'=> 'Text 4', 'price'=> 400, 'color'=> 'color_3'],
    ['id'=> 34, 'text'=> 'Text 5', 'price'=> 500, 'color'=> 'color_2'],
    ['id'=> 56, 'text'=> 'Text 6', 'price'=> 420, 'color'=> 'color_4']
];
?>
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
.seats_hall {
    font: 14px Tahoma, sans-serif;
    color: <?=dec_to_hex($color['color_default'])?>;
}
.seats_hall:hover {
    color: <?=dec_to_hex($color['color_hover'])?>;
}
<?
//определенные стили цвета в зависимости от цены/ряда
foreach(array_slice($color, 2) as $k=>$v) echo '.' . $k . '{color:' . dec_to_hex($v) . '}'
?>
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var color_ctrl = "<?=$bonus?>"; 
$(function() {
    //обработчик на все объекты
    $('.seats_hall').click(function() {
        //с индивидуальной обработкой элементов с классом color_2
        alert($(this).hasClass(color_ctrl) ? 'Bonus color' : 'Work color')
    });
    //обработчик на указанный цвет
    $('.'+color_ctrl).mouseenter(function() {
        alert('Bonus color')
    })
});
</script>     
</head> 

<body>
<?
//вывод объектов
echo implode('<br>', array_map(function($v) {
    return '<span id="obj-' .$v['id']. '" class="seats_hall '.$v['color'].'">' . $v['text'] . ', $' . $v['price'] . '</span>';
}, $objects))
?>
</body> 
</html>