基本上,我想减少必须编写的代码量。我正在尝试使用Javascript进行翻转,以将图像更改为另一图像,然后在鼠标离开图像后将图像更改回。现在,这就是我所拥有的:
<a href="#" class="amc"><img src="img/characters/amc_card.png" class="amcIMG" /></a>
$(".amc").mouseenter(function() {
$(".amcIMG").attr('src','img/characters/amc_card2.png');
});
$(".amc").mouseleave(function() {
$(".amcIMG").attr('src','img/characters/amc_card.png');
});
我希望有某种方法可以将“ .amc”存储在变量中,该变量将从翻转中获取该部分,并且可以对多个图像进行存储。我所有的图像都以类似的方式命名,因此,如果我可以用一个变量替换“ .amc”部分,该变量可以根据图像的变化而变化,因此我只需要编写一个函数即可,而不必编写超过50个的函数。 !
最佳答案
尝试这个
function(){
var amc= jQuery(".amc", jQuery("#Container"));
jQuery(amc).on("mouseenter", "img", function(e){
$(e.target).attr('src','img/characters/amc_card2.png');
});
jQuery(amc).on("mouseleave", "img", function(e){
$(e.target).attr('src','img/characters/amc_card.png');
});
}();
请记住,每次在jQuery中使用类选择器时,它都会在整个DOM中搜索包含该类的每个元素,这可能会导致性能问题。您可能会考虑像我一样通过给jQuery一个上下文来缩小其搜索范围。
关于javascript - 使用Javascript获取ID并将其用于鼠标悬停事件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29757796/