JQuery Mobile динамически изменить цвет кнопки

Question

У меня есть список кнопок, генерируемых динамически ...

var output=""; 
var active; 
var x; 
var i; 
var user_id=localStorage.get('user_id');# 

for(x=0;x<dynamic_count;x++) 
{ 
    output+="<div class='tbl' data-role='button' data-table_id='"+(x+1)+"'>"; 
    output+="<p class='center_text'>"+(x+1)+</p>"; 
    output+="<div>"; 
} 

$('.table_holder').html(output).trigger('create'); 

//active and active_count come from AJAX request (I have missed this bit our of the code..active[0]=a table number where as active[1]= s user_id 

for(i=0;i<active_count;i++) 
{ 
    if(active[1]==user_id) 
    { 
     $('.tbl').find("[data-table_id='"+active[0]+"']").css('backgroundColor', 'red'); 
    } 
} 

К сожалению, это не имеет никакого влияния на цвет фона нужного элемента. Я не уверен, что это проблема с моим кодом селектора, моим кодом css или знаком с моей реализацией jQuery Mobile.

Я заметил, что при динамическом добавлении элементов, которым требуется стилизация с помощью jQuery Mobile, мне нужно использовать метод для применения css.

Это явно запишет любые исправленные css с исходным jQuery css.

Answer 1

Попробуйте

$('.tbl').find("[data-table_id='"+active[0]+"']").css('background-color', 'red'); 

вы пытаетесь присвоить цвет фона, как этот

$('.tbl').find("[data-table_id='"+active[0]+"']").css('backgroundColor', 'red'); 

в JQuery вам нужно использовать цвет фона вместо BackgroundColor

Answer 2

Во-первых, создать пользовательский класс, например .custom-class

CSS: Обратите внимание, что !important необходимо переопределить стили JQM по умолчанию.

.custom-class { background-color: red !important; } 

Код:

Найти все кнопки с [data-table_id] атрибута, сравнить значения и применить .custom-class

var buttons = $(document).find('a[data-table_id]'); 

$.each(buttons, function() { 
$(this).removeClass('custom-class'); 
if ($(this).attr('data-table_id') == user_id) { 
    $(this).addClass('custom-class'); 
} 
}); 

Similar demo