jQuery点击按钮更改图标

Question

I have a form that looks like this:

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

}

这个不可能吗？

- Tom

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()函数来维护状态（解除武装/武装），您可以轻松地切换图标。

- j08691

---

谢谢，但是我的问题是我需要去服务器查找他们的设置是否已启用或禁用。因此，当我点击该按钮时，最终会刷新页面（没有使用ajax实现）。使用这个示例，我始终得到锁定按钮图标。 - Tom

你不能在从服务器获取数据时更改按钮和状态吗？ - j08691

Answer 2

问题似乎是由通过内联处理程序调用函数引起的：

<button class="armdisarm" name="armdisarmbutton" onClick='changeicon(this, "Disarm")'>Disarm</button>

您可能已经将changeicon定义在全局范围之外，比如在$document.ready()块中。使用内联处理程序本身就是不好的做法。最好在您的javascript代码块中附加处理程序。如果您的对象是动态填充的，请使用.on()将您的处理程序委托给父对象（例如body）。

通过一些额外的CSS，您还可以使用几个toggleClass调用来更改您的图标/文本：

HTML:

<button class="armdisarm" name="armdisarmbutton">
    <span class="disarm">Disarm</span>
    <span class="arm">Arm</span>
</button>

CSS：

.arm {
   display: none;  
}
.disarmed .arm {
   display: inline;   
}
.disarmed .disarm {
   display: none;   
}

JavaScript:

$("body").on('click', ".armdisarm", function() {
    $(this).toggleClass('disarmed')
        .find('.ui-button-icon-primary')
        .toggleClass("ui-icon-locked ui-icon-unlocked");
    return false;
});

示例：http://jsfiddle.net/jtbowden/GPKrP/

如果您想要进行一些“黑客攻击”，您可以使用单个toggleClass实现：

CSS：

.arm {
   display: none;   
}
.disarmed .arm {
   display: inline;   
}
.disarmed .disarm {
   display: none;   
}
.disarmed .ui-button-icon-primary {
    background-position: -208px -96px;
}

JavaScript:

$("body").on('click', ".armdisarm", function() {
    $(this).toggleClass('disarmed');
    return false;
});

在您的PHP中，如果按钮处于未装备状态，请将disarmed类添加到按钮中。

演示： http://jsfiddle.net/jtbowden/GPKrP/1/

- Jeff B

Answer 3

如果您真的在使用jquery-ui按钮类，您可以利用option方法：

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

这里使用的是jQuery UI 1.12，它将{icons: {primary: "ui-icon-locked" }}更改为{icon: "ui-icon-locked" }。

- emale