3

我有一个看起来像这样的表格：

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

}

这不可能吗？

4

3 回答 3

6

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

于 2012-05-11T19:28:00.107 回答
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/

于 2012-05-11T19:52:13.983 回答
0

如果你真的在使用 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" }）

于 2018-07-12T14:02:06.933 回答