0

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

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 文件中的源码需要去掉困惑了吗？

`

<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 与这篇文章相关，但我发布它没有问题。让我知道！再次感谢。

4

2 回答 2

1

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

您可以使用 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));
      });
});
于 2012-07-19T06:15:51.977 回答
-1

如果 $ = document.getElementById

那么，我当时的问题是为什么使用中有句号和英镑符号？

所以，这不应该

$(".Agthumb")

是：$("Agthumb")

于 2012-07-19T01:29:59.217 回答