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 example 。

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()功能来维持状态（撤防/武装），您可以轻松切换图标。

Answer 2

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

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

您可能已在全局范围之外定义changeicon，例如在$document.ready()块中。无论如何，使用内联处理程序是不好的做法。最好在javacsript代码块中附加处理程序。如果您的对象是动态填充的，请使用.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/

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" }）

jquery按钮更改图标与onclick

3 个答案: