jquery 按钮使用 onclick 更改图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10557271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery button change icon with onclick
提问by Tom
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>
The values are populated from the server:
这些值是从服务器填充的：
<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>
Essentially I have a button that changes its name to either "Arm" or "Disarm" based on the server records or when someone clicks it. I wanted to add the unlock/lock icons from the jquery button. So this works:
本质上，我有一个按钮，可以根据服务器记录或当有人单击它时将其名称更改为“武装”或“解除武装”。我想从 jquery 按钮添加解锁/锁定图标。所以这有效：
$(function() {
$( ".armdisarm" ).button({
icons: {
primary: "ui-icon-locked"
}
});
});
But when I pass this through a function hoping to change the icons it doesn't work:
但是当我通过一个希望更改图标的函数传递它时，它不起作用：
var changeicon = function(t, armdisarm)
{
if (armdisarm == "Disarm")
{
$( ".armdisarm" ).button({
icons: {
primary: "ui-icon-unlocked"
}
});
}
else
{
$( ".armdisarm" ).button({
icons: {
primary: "ui-icon-locked"
}
});
}
}
Is this not possible?
这不可能吗？
回答by j08691
How about doing it this way: jsFiddle example.
这样做怎么样：jsFiddle example。
jQuery:
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"
}
});
});?
By using jQuery's .data()function to maintain the state (disarm/arm) you can toggle the icon easily.
通过使用 jQuery 的.data()函数来维护状态（撤防/布防），您可以轻松切换图标。
回答by Jeff B
The problem seems to be due to calling your function via an inline handler:
问题似乎是由于通过内联处理程序调用您的函数：
<button class="armdisarm" name="armdisarmbutton" onClick='changeicon(this, "Disarm")'>Disarm</button>
You likely have defined changeiconoutside of the global scope, such as in a $document.ready()block. Using inline handlers is bad practice anyway. You are best off attaching your handlers in your javacsript code block. If your object are populated dynamically, use .on()to delegate your handler to a parent object (such as body).
您可能已经changeicon在全局范围之外进行了定义，例如在$document.ready()块中。无论如何，使用内联处理程序是不好的做法。您最好在 javacsript 代码块中附加处理程序。如果您的对象是动态填充的，请使用.on()将您的处理程序委托给父对象（例如body）。
With a little extra CSS, you can also change your icon/text with a couple of toggleClasscalls:
使用一些额外的 CSS，您还可以通过几次toggleClass调用来更改您的图标/文本：
HTML:
HTML：
<button class="armdisarm" name="armdisarmbutton">
<span class="disarm">Disarm</span>
<span class="arm">Arm</span>
</button>
CSS:
CSS：
.arm {
display: none;
}
.disarmed .arm {
display: inline;
}
.disarmed .disarm {
display: none;
}
JavaScript:
JavaScript：
$("body").on('click', ".armdisarm", function() {
$(this).toggleClass('disarmed')
.find('.ui-button-icon-primary')
.toggleClass("ui-icon-locked ui-icon-unlocked");
return false;
});
Demo: http://jsfiddle.net/jtbowden/GPKrP/
演示：http: //jsfiddle.net/jtbowden/GPKrP/
If you want to "hack" a little more, you can do this with a single toggleClass:
如果你想多“破解”一点，你可以用一个toggleClass：
CSS:
CSS：
.arm {
display: none;
}
.disarmed .arm {
display: inline;
}
.disarmed .disarm {
display: none;
}
.disarmed .ui-button-icon-primary {
background-position: -208px -96px;
}
JavaScript:
JavaScript：
$("body").on('click', ".armdisarm", function() {
$(this).toggleClass('disarmed');
return false;
});
In your PHP, just add class disarmedto your button if it is disarmed.
在您的 PHP 中，disarmed如果按钮被解除，只需将类添加到您的按钮。
回答by emale
If you really are using the jquery-ui button class you could make use of the option method:
如果您确实在使用 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");
});
});?
(Using jQuery UI 1.12 here which changes {icons: {primary: "ui-icon-locked" }}to {icon: "ui-icon-locked" })
（此处使用 jQuery UI 1.12 更改{icons: {primary: "ui-icon-locked" }}为{icon: "ui-icon-locked" }）
