Question

我正在尝试在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');
}

然而，按钮图标不会改变。我做错了什么？

由于

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

Answer 2

我真傻。我忘了在HTML中将changelayout的id分配给我的按钮。我的坏，谢谢！

Jquery移动按钮图标不会改变（通过代码）

2 个答案: