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，为每个img提供一个唯一的引用。

<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';
});

});

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

4 个答案: