使用.find（）更改图像上的src jQuery

Question

我正在处理图像源在鼠标悬停在div上时发生更改的脚本。我已经想出了如何通过自己选择图像来更改源代码，但我反而想通过使用.find（）在div中选择图像来更改源代码。有什么不工作？

$(document).ready(function() { 
 
    // Declare Arrays 
 
    imgList = new Array(); 
 
    imgList["ref1"] = new Array(); 
 
    imgList["ref2"] = new Array(); 
 
    imgList["ref3"] = new Array(); 
 

 
//Set values for each mouse state 
 
    imgList["ref1"]["out"] = "http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg"; 
 
    imgList["ref1"]["over"] = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/European_cat_02.jpg/400px-European_cat_02.jpg"; 
 
    imgList["ref2"]["out"] = "http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg"; 
 
    imgList["ref2"]["over"] = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/European_cat_02.jpg/400px-European_cat_02.jpg"; 
 
    imgList["ref3"]["out"] = "http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg"; 
 
    imgList["ref3"]["over"] = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/European_cat_02.jpg/400px-European_cat_02.jpg"; 
 

 

 
//Add the swapping functions 
 
    $("div").mouseover(function(){ 
 
    $(this).find('img').attr("src", imgList[ $(this).attr("id") ]["over"]); 
 
    }); 
 
    $("div").mouseout(function(){ 
 
    $(this).find('img').attr("src", imgList[ $(this).attr("id") ]["out"]); 
 
    }); 
 

 
});

div { 
 
    width:100px; 
 
    display:inline-block; 
 
} 
 
img { 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <img src="http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg" id="ref1"/> 
 
</div> 
 
<div> 
 
    <img src="http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg" id="ref1"/> 
 
</div> 
 
<div> 
 
    <img src="http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg" id="ref1"/> 
 
</div>

Answer 1

您必须声明的对象不是数组

// Declare objects 

     imgList = {}; 
     imgList["ref1"] = {}; 
     imgList["ref2"] = {}; 
     imgList["ref3"] = {}; 

$(this).attr("id")意味着你是从div找ATTR id不img

$(document).ready(function() { 
 
    // Declare objects 
 

 
    imgList = {}; 
 
    imgList["ref1"] = {}; 
 
    imgList["ref2"] = {}; 
 
    imgList["ref3"] = {}; 
 

 
//Set values for each mouse state 
 
    imgList["ref1"]["out"] = "http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg"; 
 
    imgList["ref1"]["over"] = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/European_cat_02.jpg/400px-European_cat_02.jpg"; 
 
    imgList["ref2"]["out"] = "http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg"; 
 
    imgList["ref2"]["over"] = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/European_cat_02.jpg/400px-European_cat_02.jpg"; 
 
    imgList["ref3"]["out"] = "http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg"; 
 
    imgList["ref3"]["over"] = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/European_cat_02.jpg/400px-European_cat_02.jpg"; 
 

 

 
    
 
    //Add the swapping functions 
 

 
    $("div").mouseover(function() { 
 
    $(this).find('img').attr("src", function() { 
 
     return imgList[this.id].over; 
 
    }); 
 

 
    }); 
 
    $("div").mouseout(function() { 
 
    $(this).find('img').attr("src", function() { 
 
     return imgList[this.id].out; 
 
    }); 
 
    }); 
 

 
});

div { 
 
    width:100px; 
 
    display:inline-block; 
 
} 
 
img { 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <img src="http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg" id="ref1"/> 
 
</div> 
 
<div> 
 
    <img src="http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg" id="ref1"/> 
 
</div> 
 
<div> 
 
    <img src="http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg" id="ref1"/> 
 
</div>

Answer 2

脚本/标记有三个问题。

1. IDS必须是唯一的，但<img id="ref1" />这可能只是一个错字
2. imgList和ref -elements应该对象{}，而不是阵列[]（JavaScript有没有关联数组）
3. 的this值在这两个地方：

$(this).find('img').attr("src", imgList[ $(this).attr("id") ]["over"]); 
$(this).find('img').attr("src", imgList[ $(this).attr("id") ]["out"]); 

this在这种情况下是<div>元素，因此$(this).attr("id")返回元素的<div>元素的id而不是<img>元素的id。解决这个问题

一种方法是使用.attr(attributeName, function)

的attributeName
类型：String
设置属性的名称。

功能
类型：Function(Integer index, String attr) =>String或Number
的函数返回到设定的值。 this是当前的 元素。接收元件的所述集合中的索引位置和 旧的属性值作为参数

$(document).ready(function() { 
 
    // Declare Arrays 
 
    var imgList = { 
 
    ref1: { 
 
     out: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/065-Barcelona-Cat-2.jpg/320px-065-Barcelona-Cat-2.jpg", 
 
     over: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Katzen_und_ihre_Sonnenpl%C3%A4tze.jpg/320px-Katzen_und_ihre_Sonnenpl%C3%A4tze.jpg" 
 
    }, 
 
    ref2: { 
 
     out: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/065-Barcelona-Cat-2.jpg/320px-065-Barcelona-Cat-2.jpg", 
 
     over: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Katzen_und_ihre_Sonnenpl%C3%A4tze.jpg/320px-Katzen_und_ihre_Sonnenpl%C3%A4tze.jpg" 
 
    }, 
 
    ref3: { 
 
     out: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/065-Barcelona-Cat-2.jpg/320px-065-Barcelona-Cat-2.jpg", 
 
     over: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Katzen_und_ihre_Sonnenpl%C3%A4tze.jpg/320px-Katzen_und_ihre_Sonnenpl%C3%A4tze.jpg" 
 
    } 
 
    }; 
 

 
    //Add the swapping functions 
 
    $("div").mouseover(function() { 
 
    $(this).find('img').attr("src", function() { 
 
     return imgList[this.id].out; 
 
    }); 
 
    }); 
 
    $("div").mouseout(function() { 
 
    $(this).find('img').attr("src", function() { 
 
     return imgList[this.id].over; 
 
    }); 
 
    }); 
 
});

div { width: 200px; height: 100px } 
 
img { width: 100%; height: 100% }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/065-Barcelona-Cat-2.jpg/320px-065-Barcelona-Cat-2.jpg" id="ref1" /> 
 
</div> 
 
<div> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/065-Barcelona-Cat-2.jpg/320px-065-Barcelona-Cat-2.jpg" id="ref2" /> 
 
</div> 
 
<div> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/065-Barcelona-Cat-2.jpg/320px-065-Barcelona-Cat-2.jpg" id="ref3" /> 
 
</div>