jQuery Mobile动态改变按钮颜色

jQuery Mobile dynamically change button color

本文关键字：按钮 颜色 改变 动态 Mobile jQuery      更新时间：2023-09-26

我有一个动态生成的按钮列表…

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移动实现的问题。

我注意到，当动态添加需要jQuery移动样式的元素时，我需要使用trigger('create')方法来应用css。

这显然覆盖了任何修改后的css与原来的jQuery css。

首先，创建一个自定义类，例如.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');
 }
});
<

相似的演示/strong>

试试这个

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

您正在尝试为背景颜色分配如下

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

在jquery中你需要使用background-color而不是backgroundColor

相关文章：