Jquery缩略图按钮不工作

我想通过单击缩略图来更改较大的图片。不管什么原因，它都不起作用。我不知道我做错了什么，我为这么简单的事情浪费了太多时间。感谢您的关注：

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-位于车身末端 之所以调用substring（），是因为缩略图的src是使用imageList函数动态创建的（请参见imageProvider.js），因为这些文件存储在子目录中，根目录前面有一个句点，需要删除Head.php文件中的源代码，现在还不清楚吗

`

window.onload=imageProvider.initLinks；
$（文件）.ready（modUI.modAccord）；
$（“.Agthumb”）。单击（函数（）{
变量位置=$（this.attr（“src”）；
$（“#theImage”）.attr（“src”，location.substring（1））；
});

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

}
};

var-imageProvider={
图:0,，
initLinks:function（）{
imageProvider.imageList（14,2）；
document.getElementById（“nextPic”）.onclick=imageProvider.processNext；
document.getElementById（“prevPic”）.onclick=imageProvider.processPrev；
},
多维数组：函数（行、列）{
var myArray=新数组（行）；
对于（变量i=0；i对于（var j=0；jIf$=document.getElementById

所以，我的问题是，为什么在用法中会有句号和磅符号

那么，这不应该吗

$(".Agthumb")

be:
$（“Agthumb”）
我认为这是因为在生成缩略图（它们是在window.onload事件中生成的）之前，选择首先运行
$（'.Agthumb'）
。在您的代码中，
$（'.Agthumb'）。长度将返回零。单击处理程序不绑定到任何元素

您可以通过使用jQuery的
.on（）
解决此问题。JSFIDLE在这里：

哪个部分不起作用。您已验证其调用函数？是否显示js错误？检查dom时，源是否不同？atlasImageList的数据是什么样子的？它是否确实是索引[0]处的属性？src=imageProvider.atlasImageList[imageProvider.thisPic][0]@flavorScape我很抱歉没有弄清楚。我的大脑因为试图解决这个问题而被炸了。我不确定，但我认为没有调用click函数。它没有在firefox错误控制台中调用任何东西。我正在使用PHPStorm，但我还没有弄清楚如何调试。我更新了上面的imageProvider.js。我玩得很开心其中的操作都很旧。imageProvider对象中的所有操作都很好。缩略图加载了正确的动态信息。它似乎在页面底部的脚本中停止工作。
$
与
document.getElementById
$（“.Agthumb”）不同
将使用类
Agthumb
$（“Agthumb”）
获取jQuery对象的集合，另一方面将获取
Agthumb
元素，这些元素不存在。请看一看。正如@zhihao所说，我将其用作一个类。那里有一个关键字“如果”你说得很对！在决定重新组织我的javascript位置后，我终于遇到了这个问题。我还学习了延迟。直到我知道我刚刚假设我应该在我的所有脚本上放置$（document）。准备就绪！我不知道我是从哪里得到这个想法的，但这是非常非常错误的。
$(".Agthumb")

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