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

Question

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.

@rani what he's saying is there's no point in removing/adding ui-icon because it's needed for both versions of it. — user400654
– user400654, Commented Oct 8, 2013 at 18:43
Because in your example, your initial value of status is UNMUTE — Jhonatas Kleinkauff
– Jhonatas Kleinkauff, Commented Oct 8, 2013 at 18:52

Wolfram · Accepted Answer · 2013-10-08 19:08:54Z

2

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

edited Oct 8, 2013 at 19:08

answered Oct 8, 2013 at 18:54

Wolfram

8,0973 gold badges49 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wolfram Over a year ago

But it is working in your fiddle, just get the code from there. The way I understand it: if the data-status is mute, the icon should be off. This is different in your HTML but correct in your JS.

beginner Over a year ago

yeah , you are right. I tested my fiddle also. But its again displaying three icons . I am getting mad

Jhonatas Kleinkauff · Accepted Answer · 2013-10-08 18:46:23Z

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

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?

edited Oct 8, 2013 at 18:46

answered Oct 8, 2013 at 18:41

Jhonatas Kleinkauff

9661 gold badge7 silver badges18 bronze badges

3 Comments

user400654 Over a year ago

i'm having a hard time figuring out what you've changed.

Barmar Over a year ago

He swapped on and off.

beginner Over a year ago

Your answer is displaying just opposite icon of my wish.Which is wrong. Just now i tested my above question code. Here is the fiddle of my above question jsfiddle.net/TrxHx/4 . Its working fine, but why its not working fine in my app?

beginner · Accepted Answer · 2013-10-08 19:24:50Z

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

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related