使用Javascript获取ID并将其用于鼠标悬停事件

Question

基本上，我想减少必须编写的代码量。 我正在尝试使用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个。 ！

Answer 1

尝试这个

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一个上下文来缩小其搜索范围。

Answer 2

尝试：

$(".amc").mouseenter(function() {
    $(this).find('img').attr('src','img/characters/amc_card2.png');
});

或更完美的方法：

$(".amc").mouseenter(function() {
    $(this).children().attr('src','img/characters/amc_card2.png');
});

Answer 3

尝试这个：

function hover(el, on) {
    var img = $(el).children('img');
    var url = img.attr('src');
    var i = url.lastIndexOf('.');
    url = on? url.substr(0, i)+'2'+url.substr(i) : url.substr(0, i-1)+url.substr(i);
    img.attr('src',url);
}

$(".amc").mouseenter(function() {
    hover(this, true);
});
$(".amc").mouseleave(function() {
    hover(this, false);
});

Answer 4

为每个img添加一个ID，为每个图片赋予唯一的引用。

<a href="#"><img src="img/characters/amc_card.png" class="amc" id="amc_card" /></a>

$(document).ready(function(){
var amc = $(".amc");

amc.mouseenter(function() {
var id = this.id;
this.src = 'img/characters/'+ id +'2.png';
});
amc.mouseleave(function() {
var id = this.id;
this.src = 'img/characters/'+ id +'.png';
});

});