2013-04-28 389 views
1

我有動態生成的按鈕中的一個列表...jQuery的移動動態改變按鈕的顏色

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代碼或者我的jQ​​uery Mobile實現的一個問題。

我注意到,動態添加需要使用jQuery Mobile樣式的元素時,我需要使用trigger('create')方法來應用CSS。

這顯然是寫了任何修改後的CSS與原來的jQuery CSS。

+1

你想要這樣的東西? http://fiddle.jshell.net/Palestinian/vGt2A/活動按鈕的樣式不同。 – Omar 2013-04-28 10:30:36

+0

謝謝這有助於很多。 :) – Sideshow 2013-04-28 11:12:29

回答

0

試試這個

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

您要指定背景顏色這樣

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

在jQuery中你需要使用的背景顏色,而不是的backgroundColor

+0

不幸的是這沒有影響 - 我相信問題在於jQuery手機添加到html5的方式 – Sideshow 2013-04-28 09:47:03

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