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 两个图标。

但是我上面的代码没有正确显示输出，而不是像下面这样一次删除之前显示的两个图标：

在此处输入图像描述

请帮助我为什么我的代码不能正常工作。

4

3 回答 3

2

正如 Jhonatas Kleinkauff 所说：您status的初始代码中混合了您的和图标。在第一次单击时，状态将为mute，因此您将尝试删除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>

您可能想查看 jQuery.toggleClass函数，该函数有一个不错的第二个参数，一个布尔开关来指示您是否要添加或删除该类。然后你可以做这样的事情：

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

但是，状态的初始值是 MUTE 并且类是 ui-icon ui-icon-volume-on

那么，为什么在静音时，您尝试删除 ui-icon ui-icon-volume-off 而不是打开？

于 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 回答