Javascript Jquery移动按钮图标赢得'；t变更（通过代码）

我试图在jquery mobile中创建一个按钮，在列表和网格视图之间切换。但是，当我按下/单击按钮图标时，我无法更改它。这是我的代码：

HTML

但是按钮图标不会改变。我做错了什么

感谢jQuery中的。数据（'x'）不读取/写入元素的

data-x

属性-它读取/写入由jQuery单独处理的后台数据集。相反，您需要使用

.attr（）

方法

请尝试以下操作：

function changeLayout() {
if ($('#changeLayout').attr('data-icon') == 'grid'){
    $('#changeLayout').attr('data-icon', 'bars');
    $('#changeLayout .ui-icon').addClass('ui-icon-bars').removeClass('ui-icon-grid');
}
else {
    $('#changeLayout').attr('data-icon', 'grid');
    $('#changeLayout .ui-icon').addClass('ui-icon-grid').removeClass('ui-icon-bars');
}

---

请注意，尽管jQuery文档说您可以使用

.data（'x'）

访问

data-x

，但我从未见过它真正起作用。只要代码中没有其他问题，更改为

.attr（'x'）

总是可以解决问题。

我真的很笨。我忘了在HTML中将changelayout的id分配给我的按钮。我的错，谢谢

您可能需要在更改后调用

$（“#更改布局”）.button（“刷新”）

或

$（“#更改布局”）.buttonMarkup（“刷新”）

，以更新按钮的外观。

function changeLayout() {
if ($('#changeLayout').data('icon') == 'grid'){
    $('#changeLayout').data('icon', 'bars');
    $('#changeLayout .ui-icon').addClass('ui-icon-bars').removeClass('ui-icon-grid');
}
else {
    $('#changeLayout').data('icon', 'grid');
    $('#changeLayout .ui-icon').addClass('ui-icon-grid').removeClass('ui-icon-bars');
}

function changeLayout() {
if ($('#changeLayout').attr('data-icon') == 'grid'){
    $('#changeLayout').attr('data-icon', 'bars');
    $('#changeLayout .ui-icon').addClass('ui-icon-bars').removeClass('ui-icon-grid');
}
else {
    $('#changeLayout').attr('data-icon', 'grid');
    $('#changeLayout .ui-icon').addClass('ui-icon-grid').removeClass('ui-icon-bars');
}