Question

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

我的问题列于法典部分。实现这一目标的最容易的方法是什么?

预收

Answer 1

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

我起草了一部行之有效的法典。但我认为它有些复杂。因此,需要了解能否以更有效的方式做到这一点。

Answer 2

我假定你打算就第二次模拟活动写上<代码>Mouseout。

如果你始终将<条码>——SpriteN的类别名称留在名单上,则该字标线将有效。

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

尽管我想到我,大家想要的是冷却效应。为什么不使用假歌<代码>:hover 类似:

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

它赢得IE6的笔工作,因为它在<条码>div要素上,这可能是你为什么要使用 j。

www.un.org/Depts/DGACM/index_spanish.htm • 说明如何运行

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 3

Try the hover 方法:

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

友情链接