CODEWITHSUNDEEP
jquery
rahul
rahul

Reputation: 187030

Remove second class from an element and add another class

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

Upvotes: 1

Views: 5070

Answers (3)

TheVillageIdiot
TheVillageIdiot

Reputation: 40497

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

Upvotes: 0

aolde
aolde

Reputation: 2295

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

Upvotes: 1

rahul
rahul

Reputation: 187030

$(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.

Upvotes: 4

Related Questions