0

以下のスクリプトがあります

  $.fn.SoundToggle = function() {
            var sound_staus = $('#soundstatus').data('status');
            if (sound_staus === 'mute')
            {
                $('#soundstatus').data('status', 'unmute');//ui-icon ui-icon-volume-off
                $("#soundstatus span").removeClass("ui-icon ui-icon-volume-off").addClass("ui-icon ui-icon-volume-on");
            } else
            {
                $('#soundstatus').data('status', 'mute');
                $("#soundstatus span").removeClass("ui-icon ui-icon-volume-on").addClass("ui-icon ui-icon-volume-off");
            }
        }

そしてhtml

<a class="button"  title="Sound Mute/Unmute" data-status="mute" onClick="$(this).SoundToggle();" id="soundstatus"> 
                    <span class="ui-icon ui-icon-volume-on"></span>
</a>

Speaker Mute & unmuteクリック時にjquery uiの2つのアイコンを切り替えたい。

しかし、上記のコードは、次の画像のように一度に 2 つのアイコンを表示する以前のアイコンを削除するのではなく、出力を適切に表示していません。

ここに画像の説明を入力

私のコードがうまく動かない理由を教えてください。

4

3 に答える 3

2

Jhonatas Kleinkauff が言っstatusたように、最初のコードには と アイコンが混在しています。最初のクリックでステータスが になるmuteので、そこにない class を削除しようとするui-icon-volume-offため、実際にはどのクラスも削除されません。その後、追加ui-icon-volume-onして両方のクラスを同時に設定することになるため、両方のアイコンが表示されます。

ただし、フィドルで正しく実行しています（ステータスはunmute、サウンドはオンで、クラスは である必要がありますui-icon-volume-on）。

unmute質問のコードを修正するには、フィドルで行ったように初期ステータスを次のように切り替える必要があります。

<a class="button" title="Sound Mute/Unmute" data-status="unmute" onClick="$(this).SoundToggle();" id="soundstatus"> 
    <span class="ui-icon ui-icon-volume-on"></span>
</a>

または他の HTML クラスを設定します。

<a class="button" title="Sound Mute/Unmute" data-status="mute" onClick="$(this).SoundToggle();" id="soundstatus"> 
    <span class="ui-icon ui-icon-volume-off"></span>
</a>

.toggleClassクラスを追加または削除するかどうかを示すブールスイッチである、素敵な2番目のパラメーターを持つjQuery関数を調べることをお勧めします。次に、次のようなことができます。

var $soundIcon = $('#soundstatus span');
var soundShouldBeTurnedOn = currentStatus === "mute";
$soundIcon.toggleClass("ui-icon-volume-on", soundShouldBeTurnedOn)
          .toggleClass("ui-icon-volume-off", !soundShouldBeTurnedOn);
于 2013-10-08T18:54:20.447 に答える
1 
 $.fn.SoundToggle = function() {
            var sound_staus = $('#soundstatus').data('status');
            if (sound_staus === 'mute')
            {
                $('#soundstatus').data('status', 'unmute');//ui-icon ui-icon-volume-off
                $("#soundstatus span").removeClass("ui-icon ui-icon-volume-on").addClass("ui-icon ui-icon-volume-off");
            } else
            {
                $('#soundstatus').data('status', 'mute');
                $("#soundstatus span").removeClass("ui-icon ui-icon-volume-off").addClass("ui-icon ui-icon-volume-on");
            }
        }

元のコードで：

 if (sound_staus === 'mute')
            {
                ...
                $("#soundstatus span").removeClass("ui-icon ui-icon-volume-off").addClass("ui-icon ui-icon-volume-on");
            }..

ただし、status の初期値は IS MUTE AND クラスは ui-icon ui-icon-volume-on です

では、なぜミュート時に ui-icon ui-icon-volume-off を on ではなく削除しようとするのでしょうか?

于 2013-10-08T18:41:04.753 に答える
0

idアイコンdivに提供することで解決しました。

巨大なコードのせいで、いくつかのスパンと競合して、複数のアイコンが表示されていたと思います。

私は、idは一意でなければならないと思ったので、id属性を追加しましたid="volumeicondId"

<a id="soundstatus" class="button"  title="Sound Mute/Unmute" data-status="unmute" onClick="$(this).SoundToggle();" > 
                    <span id="volumeicondId" class="ui-icon ui-icon-volume-on"></span>

そしてjs関数

  $.fn.SoundToggle = function() {
            var sound_staus = $('#soundstatus').data('status');
            if (sound_staus === 'unmute')
            {
                $('#soundstatus').data('status', 'mute');//ui-icon ui-icon-volume-off
                $("#volumeicondId").removeClass("ui-icon ui-icon-volume-on").addClass("ui-icon ui-icon-volume-off");
            } else
            {
                $('#soundstatus').data('status', 'unmute');
                $("#volumeicondId").removeClass("ui-icon ui-icon-volume-off").addClass("ui-icon ui-icon-volume-on");
            }
        }
于 2013-10-08T19:24:50.427 に答える