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 に答える