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元素上，这可能就是你想要使用jQuery的原因。

编辑以阐明其工作原理

鼠标悬停：
首先，我使用$this.attr('class')获取class属性的值，该值将返回MenuItem Sprite1的字符串。如果您使用“Dis”附加此字符串，则会获得MenuItem Sprite1Dis。这正是你想要的。现在我把这个字符串放回class属性，我们就准备好了。

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

鼠标移出：
与之前的事件一样，我们通过$this.attr('class')检索当前的类属性值，并像预期的那样返回MenuItem Sprite1Dis。我们想要做的是删除字符串的Dis部分。我们可以通过简单的replace'Dis'到''（无）来实现。

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

Answer 3

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

从元素中删除第二个类并添加另一个类

3 个答案: