jQuery的ATTR方法不能在正常工作「OnMouseEnter在」

Question

這是真實的情況： 正如我說我有12級不同的DIV的和喜歡this.I頁面已鏈接的js文件已經 的index.html：

<div id="images_puzzle"> 
    <div> 
     <img /> 
     <p></p> 
    </div> 
    <div> 
     <img /> 
     <p></p> 
    </div> 
    <div> 
     <img /> 
     <p></p> 
    </div> 
    <div> 
     <img /> 
     <p></p> 
    </div> 
    <div> 
     <img /> 
     <p></p> 
    </div> 
    <div> 
     <img /> 
     <p></p> 
    </div> 
    <div> 
     <img /> 
     <p></p> 
    </div> 
    <div> 
     <img /> 
     <p></p> 
    </div> 
    <div> 
     <img /> 
     <p></p> 
    </div> 
    <div> 
     <img /> 
     <p></p> 
    </div> 
    <div> 
     <img /> 
     <p></p> 
    </div> 
    <div> 
     <img /> 
     <p></p> 
    </div> 
     </div> 


</div> 

注意到我已將Jquery.js與我自己的js文件結合在一起。 這是我無法得到我想要的東西的地方。通過將鼠標懸停在每個圖像上我想調用一個函數，所有其他屬性都運行良好，但這不是。

webroot.js：

function setPuzzleImages() { 
// alert('loading images...'); 
var $index = 1; 
var $IMGs = $('#images_puzzle IMG'); 
$IMGs.each(function() { 
$(this).attr({ 'src': 'images/105-100/' + $index + '.jpg','onmouseover':'showTitle('+$index+');'}); 
    $index++; 
}); 
} 

function showTitle($index) { 
alert('this is the'+$index+'image'); 
} 

Answer 1

我能看到的唯一的問題是showTitle可能不會在全球範圍內的方法，所以儘量

$myImg = $('img') 
$myImg.attr({ 
    src: 'myPic.png' 
}).mouseover(showTitle); 

function showTitle() { 
    alert('Hello World'); 
} 

演示：Fiddle

你如果您將方法添加到全球範圍內，ode可以正常工作

演示：Fiddle

---

基於更新

function setPuzzleImages() { 
    var $IMGs = $('#images_puzzle IMG'); 
    $IMGs.mouseover(showTitle).attr('src', function (i) { 
     return 'images/105-100/' + (i + 1) + '.jpg' 
    }) 
} 

function showTitle() { 
    console.log('Hello World', this); 
}