Question

我使用jQuery .hover（）来更改另一个元素的类。当猫徘徊时，班级＆＃34; cat＆＃34;添加到div＆＃34;照片＆＃34;。当狗徘徊时，班级＆＃34;狗＆＃34;添加到div＆＃34;照片＆＃34;。猫，狗和长颈鹿在任何时候都可以活跃。在mouseout上，我需要将photo div恢复为活动元素可能属于的类。

<ul>
     <li class="cat active">Cat</li>
    <li class="dog">Dog</li>
    <li class="giraffe">Giraffe</li>
</ul>

<div id="photo" class="cat"></div>

我的悬停脚本

$('li.cat').hover(function(){
    $('#photo').removeClass().addClass('cat');
});

$('li.dog').hover(function(){
    $('#photo').removeClass().addClass('dog');
});

$('li.giraffe').hover(function(){
    $('#photo').removeClass().addClass('giraffe');
});

Answer 1

一个通用的解决方案就是迭代“active”元素所具有的类列表，查找您期望的类，并应用该类。但是，如果您可以保证li的classList永远不会是dog|cat|giraffe加上可选active以外的其他任何内容，那么只需删除active即可简化类。

此外，您可以通过为每个li使用通用处理函数而不是单独的处理函数来优化代码。最后，hover() jQuery方法有两个参数：一个在鼠标输入时执行的函数，另一个在鼠标输出时执行。 Fiddle is here.

var getPhotoClassesFromElement = function ($el) {
    var otherClasses = $el[0].className.replace(/\s*active\s*/, '');
    return otherClasses;
};

var handlerIn = function (e) {
    var $el = $(e.target);
    var photoClass = getPhotoClassesFromElement($el);
    $('#photo').removeClass().addClass(photoClass);
};

var handlerOut = function (e) {
    var $el = $(e.target);
    var photoClass = getPhotoClassesFromElement($('li.active'));
    $('#photo').removeClass().addClass(photoClass);
};

$('li').hover(handlerIn, handlerOut);

jQuery在Mouseout上恢复为默认类

1 个答案: