jquery按钮更改图标与onclick

Question

我有一个看起来像这样的表单:

<form name="armdisarmform" action="/cameras" method="POST">
    <input type='hidden' name='armdisarmvalue' value="ENABLED"/>
    <button class="armdisarm" name="armdisarmbutton" onClick='changeicon(this, "Disarm")'>Disarm</button>
</form>

值从服务器填充:

<form name="armdisarmform" action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>" method="POST">
    <input type='hidden' name='armdisarmvalue' value="<?php echo $userstatus; ?>"/>
    <button class="armdisarm" name="armdisarmbutton" onClick='changeicon(this, "<?php echo $armdisarm; ?>")'><?php echo $armdisarm; ?></button>
</form>

基本上我有一个按钮,根据服务器记录或有人点击它,将其名称更改为"Arm"或"Disarm".我想从jquery按钮添加解锁/锁定图标.这样可行:

$(function() {
    $( ".armdisarm" ).button({
        icons: {
            primary: "ui-icon-locked"
        }
    });

});

但是当我通过希望更改图标的函数传递它时,它不起作用:

var changeicon = function(t, armdisarm)
{
    if (armdisarm == "Disarm")
    {
        $( ".armdisarm" ).button({
            icons: {
                primary: "ui-icon-unlocked"
            }
        });
    }
    else
    {
        $( ".armdisarm" ).button({
            icons: {
                primary: "ui-icon-locked"
            }
        });
    }

}

这不可能吗？

Answer 1

怎么样这样做:jsFiddle示例.

jQuery的:

$(".armdisarm").button({
    icons: {
        primary: "ui-icon-locked"
    }
});
$('button').click(function() {
    $(this).data('state', ($(this).data('state') == 'disarm') ? 'arm' : 'disarm');
    $(".armdisarm").button({
        icons: {
            primary: ($(this).data('state') == "disarm") ? "ui-icon-unlocked" : "ui-icon-locked"
        }
    });
});?

通过使用jQuery的.data()函数来维护状态(撤防/手臂),您可以轻松切换图标.