Remove second class from an element and add another class

Question

Hi,

$(document).ready ( function () {
    $(".MenuItem").mouseover ( function () {
        // Remove second class and add another class [ Maintain MenuItem class ]
        // Eg: For div1 remove Sprite1 and then add Sprite1Dis and for div2 
        // remove Sprite2 and add Spprite2Dis 
    });
    $(".MenuItem").mouseout ( function () {
        // Reverse of mouseover. ie Remove Sprite1Dis and add Sprite1
    });
});

<div id="div1" class="MenuItem Sprite1">
&nbsp;
</div>

<div id="div2" class="MenuItem Sprite2">
&nbsp;
</div>

<div id="div3" class="MenuItem Sprite3">
&nbsp;
</div>

<div id="div4" class="MenuItem Sprite4">
&nbsp;
</div>

<div id="div5" class="MenuItem Sprite5">
&nbsp;
</div>

<div id="div6" class="MenuItem Sprite6">
&nbsp;
</div>

My problem is listed as comment inside the code section. What will be the easiest way to achieve this?

Thanks in advance

Answer 1

I assume you meant to write mouseout on the second mouse event.

This bit of script will work if you always keep the SpriteN class name last in the list.

    $(".MenuItem").mouseover(function() {
        var $this = $(this);
        // Get current class names and append 'Dis'.
        $this.attr('class', $this.attr('class') + "Dis");

    });
    $(".MenuItem").mouseout(function() {
        var $this = $(this);
        // Get current class names and remove 'Dis'.
        $this.attr('class', $this.attr('class').replace('Dis', ''));
    });

Although it looks to me that all you want is a hover effect. Why not use the pseudo-class :hover like this:

.Sprite1:hover { }
.Sprite2:hover { }

It won't work in IE6 as it's on a div element, which might be why you want to use jQuery.

Edit to clarify how it works

Mouse over:
First I get the value of the class attribute with $this.attr('class') which will return a string of MenuItem Sprite1. If you append this string with 'Dis' you get MenuItem Sprite1Dis. And that is exactly what you wanted. Now I put this string back to the class attribute and we're ready.

$this.attr('class', $this.attr('class') + "Dis");

Mouse out:
Like previous event we retrieve the current class attribute value by $this.attr('class'), and it returns MenuItem Sprite1Dis like expected. What we want to do is remove the Dis part of the string. We can do that by doing a simple replace of 'Dis' to '' (nothing).

$this.attr('class', $this.attr('class').replace('Dis', ''));

Answer 2

Try the hover method:

$(".MenuItem").hover ( function () {//THIS FUNCTION WORK ON MOUSE OVER
    // Remove second class and add another class [ Maintain MenuItem class ]
    // Eg: For div1 remove Sprite1 and then add Sprite1Dis and for div2 
    // remove Sprite2 and add Spprite2Dis 
},
function () {//THIS FUNCTION WORKS ON MOUSEOUT
    // Reverse of mouseover. ie Remove Sprite1Dis and add Sprite1
});

Answer 3

$(document).ready ( function () {
     $(".MenuItem").mouseover ( function () {
      var lastClass = $(this).attr('class').split(' ').slice(-1); 

      $(this).removeClass().addClass("MenuItem").addClass(lastClass + "Dis");
     });
     $(".MenuItem").mouseout ( function () {
      var lastClass = $(this).attr('class').split(' ').slice(-1);
      var strLastClass = lastClass.toString();
      var toAddClass = strLastClass.substring(0,strLastClass.length - 3 );

      $(this).removeClass().addClass("MenuItem").addClass(toAddClass);
     });
    });

I have written a code that works. But I think it is somewhat complicated. So need to know whether it can be done in a more efficient way.