Javascript-форум - изменение цвета при клике

Нет понятия о чем я спрашиваю.
Например, цена имеет закономерность - каждая последующая больше предыдущей на 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>