jQuery在Mouseout上恢复为默认类
jQuery在Mouseout上恢复为默认类
提问于 2014-03-20 15:03:29
我使用jQuery .hover()来更改另一个元素的类。当猫被盘旋，类“猫”被添加到div“照片”。当狗被盘旋，类“狗”被添加到div“照片”。猫、狗和长颈鹿在任何时候都可以活动。在mouseout中，我需要照片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');
});回答 1
Stack Overflow用户
回答已采纳
发布于 2014-03-20 15:45:43
一个常见的解决方案是迭代"active“元素所拥有的类列表，查找所期望的类，并应用该类。但是，如果您可以保证li的li不会是除dog|cat|giraffe和可选的active之外的其他任何东西，那么只需删除active类就可以简化。
此外，您可以通过为每个li设置一个通用处理程序函数而不是一个单独的函数来优化您的代码。最后，hover() jQuery方法接受两个参数:一个函数在鼠标中执行，另一个在鼠标退出时执行。小提琴在这里。
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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22537020
复制相关文章
相似问题
腾讯云开发者
