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

[apol775]

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

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

[laimas]

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

[apol775]

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

[laimas]

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

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

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

.custom_price_color<?=$i;?>

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

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

[apol775]

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

[apol775]

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

[Mess4me]

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

<script>

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

</script>

[laimas]

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

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

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

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

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

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

[apol775]

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

<script>

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

</script>

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

[Mess4me]

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