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 - 位于Body的末尾 调用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与这篇文章有关，但我发布它没有问题。请告诉我！再次感谢。

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

Answer 2

如果$ = document.getElementById

那么，我将要问的问题是为什么在使用中会出现句号和井号？

所以，不应该这个

$(".Agthumb")

be：$("Agthumb")

Jquery缩略图按钮不起作用

2 个答案:

Jquery缩略图按钮不起​​作用

2 个答案:

Jquery缩略图按钮不起作用