Jquery mobile：点击更改主题
我有一个主题a的基本列表。 我试图找到一种方法来点击按钮时更改主题。 尝试了$('a li').attr('data-theme','a'); 结合列表刷新没有运气。 那里有成功吗？
您必须在页面中搜索所有ui-body-，ui-button-up，ui-button-down，ui-button-hover和ui-bar-类，在每个类的末尾找到字母，删除这些类，然后在每个类的末尾添加所需的主题字母。 我正在制作一个插件来做到这一点。
下面会将主题D的页面设置更改为主题B：
var pages = $("div[data-role='page']"), pageThemeClasses = $(pages+"[class$=d]"); $(pageThemeClasses).removeClass('ui-bar-b'); $(pageThemeClasses).addClass('ui-bar-b');
不知道为什么这有效，但改变了主题，然后触发’创建’对我有用 – 希望它对某人有所帮助。
$("div[data-role='collapsible']").bind('expand', function() { $(this).find("a[data-theme='c']").removeClass('ui-btn-up-c').addClass('ui-btn-up-b').attr('data-theme', 'b').trigger('create'); }); $("div[data-role='collapsible']").bind('collapse', function() { $(this).find("a[data-theme='b']").removeClass('ui-btn-up-b').addClass('ui-btn-up-c').attr('data-theme', 'c').trigger('create'); });
嗯，这取决于你想改变什么样的元素。 这是你可以切换按钮元素主题的方法：
var oT = $(this).attr('data-theme'); // old theme var nT = (oT == 'a' ? 'e' : 'a'); // new theme $(this).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT); $(this).parent('div').removeClass('ui-btn-hover-' + oT).addClass('ui-btn-hover-' + nT).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT);
相反，如果它是一个带有data-role =“button”的锚标签：
$(this).removeClass('ui-btn-hover-' + oT).addClass('ui-btn-hover-' + nT).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT);
简单地说，使用浏览器控制台来检查元素（和父/子元素）数据主题属性和类的定义位置。
我注意到，如果您更改“data-theme”属性，jQuery Mobile将在mouseover事件上刷新您的主题。 这个解决方案有点像黑客，但它很简单。
$("a li").attr("data-theme", "a").trigger("mouseout")
很抱歉复活了一个死的问题，但我发现了这个问题Google（SERP上的＃6为“jquery mobile change theme”）并且没有正确答案。
好吧，Corey Docken的答案基本上有效：
$("a li").attr("data-theme", "a").trigger("mouseout")
诀窍在于，当您根据选择的数据主题hover在元素上时，jQuery mobile始终会更改类。 如果更改数据主题，则下一个hover/鼠标hover事件将根据新主题更改类。
嗯，它只适用于新主题的字母高于旧主题的字母。 旧主题的课程仍然存在。 由于具有较高字母的类放置在具有较低字母的字母之后，较高的字母获胜。
这对我有用。
$("a li").removeClass("ui-body-b"); //remove old theme $("a li").addClass("ui-body-a"); //add new theme
$('a li').data('theme', 'a'); //<-- use the data() function to change data attributes
如果您使用主题滚轮（themeroller.jquerymobile.com），那么您可以调整自己的颜色并在css上导出每个主题，然后以编程方式：
$("#idoflink").attr("href", "theotherstyle.css");
我认为应该这样做
将此代码置于头部：
$（“＃testpage”）是示例组件的id（这将是body中主div的id）。
添加到身体：
我希望这是你想要实现的目标的答案。 当然，您可以轻松地用“按钮”替换“无线电”并稍微重新设置它。
在2018年，这适用于我，只需调整您从ThemeRoller下载的不同主题的值。
获取具有data-role =“page”的div
var lastTheme = 'a'; function ThemeSwap() { var rootDiv = $('#IdOfDivMarkedAsDataRolePage'); if (lastTheme === 'a') { rootDiv.removeClass('ui-page-theme-a'); rootDiv.addClass('ui-page-theme-b'); lastTheme = 'b'; } else if (lastTheme === 'b') { rootDiv.removeClass('ui-page-theme-b'); rootDiv.addClass('ui-page-theme-c'); lastTheme = 'c'; } else if (lastTheme === 'c') { rootDiv.removeClass('ui-page-theme-c'); rootDiv.addClass('ui-page-theme-a'); lastTheme = 'a'; } else alert('bad theme swapping. last theme = ' + lastTheme); rootDiv.trigger('create'); return true; }
在ifelse块结束时尚未抛出警报。