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 - 本文 の最後にあります サムネイルの src が imageList 関数を使用して動的に作成されたため、substring() が呼び出されました (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 に答える