javascript - 在 JQM 中动态更改 data-iconpos

Question

我正在制作一个 jQuery Mobile 应用程序。我希望能够在另一个文件的函数中设置导航栏的属性。这意味着，我想通过 .js 文件中的一个函数来更改许多 html 文件中的导航栏属性。

我试图在页面创建中更改类，但它对我不起作用：

$('div[data-role$="navbar"]').bind('pagecreate', function(){
    div=this;
    alert(div.class);
    div.setAttribute("class","ui-btn ui-btn-inline ui-btn-icon-left ui-btn-up-a");
}

你有什么想法吗？

Answer 1

当您使用 jQuery 时，为什么不让自己更轻松并在处理程序中使用它呢？

$('div[data-role$="navbar"]').bind('pagecreate', function(){
  var $this = $(this);
  alert( $this.attr('class') );
  $this.attr('class','ui-btn ui-btn-inline ui-btn-icon-left ui-btn-up-a');

  //Possibly you mean ...
  //$this.addClass('ui-btn ui-btn-inline ui-btn-icon-left ui-btn-up-a');
}

Answer 2

这是给你的一个例子，这是一个代码：

$('div:jqmData(role="page")').live('pagebeforeshow',function(){
    $('div[data-role$="navbar"] ul li a span span').addClass('new-class');
});

此行将为每个页面执行：

$('div:jqmData(role="page")').live('pagebeforeshow',function(){

例如，此行将更改导航栏文本的颜色：

$('div[data-role$="navbar"] ul li a span span').addClass('new-class');

这部分 od 代码可以在我的 jsFiddle 示例底部找到（HTML 部分）