0

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

HTML

<a href="javascript:changeLayout()" class="ui-btn-right" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="b" data-inline="true"></a>

Javascript

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');
}

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

谢谢

4

2 回答 2

1

在 jQuery.data('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')access data-x，但我从未见过它真正起作用。.attr('x')只要代码中没有其他问题，更改为始终可以解决问题。

于 2013-04-12T00:49:15.367 回答
0

我真的很傻。我忘记将 changelayout 的 id 分配给 HTML 中的按钮。我的错，不过谢谢！

于 2013-04-12T10:32:35.273 回答