Jquery 썸네일 버튼이 작동하지 않습니다.

Question

썸네일을 클릭하여 더 큰 그림을 변경하고 싶습니다. 어떤 이유로 든 작동하지 않습니다. 나는 내가 뭘 잘못하고 있는지 단서가 없으며 그렇게 간단한 것을 너무 많이 낭비했다. 찾고 주셔서 감사합니다 :

HTML을 - Head.php

....... 
<section> 
<img id="theImage" src="images/mods/angiograph/head/Ag1.jpg" title="Ag-01" alt="Ag-01"> 
</section> 
<section id="rightMenu"> 
    <div id="addHolder"> 
     <h3 class="topHeader"><a href="#">Quick Pick</a></h3> 
      <div id="quickPick"> 
       <ul id="thumbList"> 
       </ul> 
      </div> 
</section> 

...... 

JS - 썸네일의 SRC가 사용하여 동적으로 생성 되었기 때문에 몸의 끝 부분에 문자열을()에 위치한이 불렀다 imageList 함수 (imageProvider.js 참조) 이러한 파일은 하위 디렉토리에 저장되기 때문에 루트 디렉토리 앞에 마침표가 있습니다.이 파일은 Head.php 파일의 소스에 대해 제거해야합니다. 아직 혼란 스럽습니까?

`

<script> 
    window.onload = imageProvider.initLinks; 
    $(document).ready(modUI.modAccord); 

$(".Agthumb").click(function(){ 
    var location = $(this).attr("src"); 
    $("#theImage").attr("src", location.substring(1)); 
    }); 
</script> 

JS - imageProvider.js

var imageProvider = { 
thisPic: 0, 

initLinks: function() { 
    imageProvider.imageList(14, 2); 
    document.getElementById("nextPic").onclick = imageProvider.processNext; 
    document.getElementById("prevPic").onclick = imageProvider.processPrev; 

}, 


multiDimensionArray:function (rows, columns) { 
    var myArray = new Array(rows); 
    for (var i = 0; i < rows; i++) { 
     myArray[i] = new Array(columns); 
     for (var j = 0; j < columns; j++) { 
      myArray[i][j] = ""; 
     } 
    } 
    return (myArray); 
}, 

imageList:function (qty, data) { 
    var imageData = imageProvider.multiDimensionArray(qty, data); 
    var filePath = './images/mods/angiograph/head/'; 
    var imgPrefix = 'Ag'; 
    var imageType = '.jpg'; 


    for (var i = 0; i < qty; i++) { 
     imageData[i][1] = filePath + imgPrefix + (i + 1) + imageType; 
    } 

    for (var j = 0; j<imageData.length; j++){ 
      $("<li>", { html:"<img class='"+ imgPrefix + "thumb' alt='"+ imgPrefix + (j + 1) + "' src=" + imageData[j][1] + " width='75' height='75'/>"}).appendTo("#thumbList"); 
    } 

} 
}; 

나는 CSS를이 게시물에 관련된 생각하지 않는다,하지만 난 아무 문제를 게시이 없습니다. 바로 알려주세요! 다시 한번 감사드립니다.

Answer 1

나는 선택이 썸네일이 생성되기 전에 먼저 $('.Agthumb') (그들은 창로드 이벤트에 생성)를 실행 있기 때문에 생각합니다. 코드에서 $('.Agthumb').length은 0을 반환합니다. 클릭 핸들러는 요소에 바인딩되지 않습니다.

jQuery의 .on()을 사용하여이 문제를 해결할 수 있습니다. jsfiddle은 여기에 있습니다 : http://jsfiddle.net/HMPjP/

// Used on() to bind click event on thumbnails created 
// by imageProvider 
$(document).ready(function() { 
    $('#thumbList').on('click', '.Agthumb', function() { 
      console.log('I was clicked'); 
      var location = $(this).attr("src"); 
      $("#theImage").attr("src", location.substring(1)); 
     }); 
}); 

Answer 2

$ 만약 = document.getElementById를

이 기간과 사용에 파운드 기호가 왜 이렇게, 그때했을 질문은?

그렇게해야하지이

$(".Agthumb") 

수 : $("Agthumb")