2016-09-19 2 views
1

Я пытаюсь назначить цвета этим кнопкам диапазона, если я поместил класс внутри класса span, он вроде как работает, но иногда он не меняет цвет, а также я хочу иметь возможность установили только одну кнопку, как цветную. И мне также нужно сохранить значения внутри стиля, потому что я хочу, чтобы он был раскрашен при загрузке страницы.Назначить стиль attr через jquery

while($stmt->fetch()): ?> 
<div class="statusicons"> 
    <a href="#" class="btn btn-xs btn-default"><span data-color="0" class=" glyphicon glyphicon-ok" style=""></span></a> 
    <a href="#" class="btn btn-xs btn-default"><span data-color="1" class=" glyphicon glyphicon-road" style=""></span></a> 
    <a href="#" class="btn btn-xs btn-default"><span data-color="2" class=" glyphicon glyphicon-remove-sign" style=""></span></a> 
    </div> 
<?php endwhile; 
$stmt->close(); ?> 

$('.statusicons').on('click', function() { 
    var color = $(this).data('color'); 
    var array = ['green', 'orange', 'red']; 
    $(this).attr('style', 'color :' + array[color]); 
}); 

ответ

0

использование css(), изменить событие щелчка по ссылке мыши и найти интервал, что ссылка и цвет его

$('.statusicons a').on('click', function(e) { 
    e.preventDefault(); 
    var color = $(this).find('span').data('color'); 
    var array = ['green', 'orange', 'red']; 
    $(this).find('span').css('color',array[color]); 

}); 

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

+0

@Bartek Глэдис Это делает то же самое, как и раньше, мне нужно, чтобы добавить класс пядь, но я могу изменить цвет всех 3-х кнопок, которые я не хочу, я хочу, чтобы иметь возможность установить только одна кнопка, а также иногда она не работает, когда я нажимаю кнопку, ничего не происходит. – rtom

+0

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

+0

да, вы можете сохранить, да, вы можете сбросить – madalinivascu

0

попробовать css()

$(this).css('color', array[color]); 
+0

Пожалуйста, отредактируйте с дополнительной информацией. Только код и «попробуйте» ответы не приветствуются, поскольку они не содержат содержимого, доступного для поиска, и не объясняют, почему кто-то должен «попробовать это». – abarisone

1

Возможно, это из-за data-color возвращает строку.

Попробуйте преобразовать индекс в целое число.

$('.statusicons a').on('click', function() { 
    var color = parseInt($(this).data('color')); // Convert data-color to integer to check index 
    var array = ['green', 'orange', 'red']; 
    $(this).attr('style', 'color :' + array[color]); 
}); 
+0

Массив не проблема, я могу установить цвет, но иногда после того, как я нажимаю на кнопку, ничего не происходит, и я также должен иметь возможность назначать цвет только одной из трех кнопок. – rtom

Смежные вопросы