CODEWITHSUNDEEP
jqueryjquery-ui
beginner
beginner

Reputation: 673

unable to implement remove class & add-class feature of jquery

I have this below script 

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

And 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>

I want to toggle jquery ui Speaker Mute & unmute two icons on click.

But my above code is not showing output properly, instead of removing previous its showing two icons at once like this image:

enter image description here

Please help me why my code is not working fine.

Upvotes: 0

Views: 165

Answers (3)

beginner
beginner

Reputation: 673

I solved it by providing id to the icon div.

I think because of the huge code, it was showing multiple icons, by confilcting with several span.

I thought, id should be unique hence i added a id attribute i.e 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>

And js function

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

Upvotes: 0

Wolfram
Wolfram

Reputation: 8052

As Jhonatas Kleinkauff said: you have your status and icons mixed in your initial code. On the first click, the status would be mute, so you would try to remove the class ui-icon-volume-off, which is not there, so in fact, no class gets removed. Afterwards you are adding ui-icon-volume-on and end up having both classes set at the same time, so both icons are shown.

You are doing it right in your fiddle though (status is unmute, so sound is on and the class should be ui-icon-volume-on, which it is).

To fix the code in your question, you would have to either switch the initial status to unmute as you did in the fiddle:

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

or set the other HTML class:

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

You might want to look into jQuery .toggleClass function which has a nice second parameter, a boolean switch to indicate if you want to add or remove the class. You could then do something like this:

var $soundIcon = $('#soundstatus span');
var soundShouldBeTurnedOn = currentStatus === "mute";
$soundIcon.toggleClass("ui-icon-volume-on", soundShouldBeTurnedOn)
          .toggleClass("ui-icon-volume-off", !soundShouldBeTurnedOn);

Upvotes: 2

Jhonatas Kleinkauff
Jhonatas Kleinkauff

Reputation: 966

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

On the original code:

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

But, the initial value of status IS MUTE AND the class is ui-icon ui-icon-volume-on

So, why when mute, you try to remove ui-icon ui-icon-volume-off instead on?

Upvotes: 1

Related Questions