2

リンクのリストがあります。私がやりたいことは、jQuery を使用して各リンクに関数を添付することです。リンクをクリックすると関数が実行され、画像のペアが div に読み込まれます (画像 ID "img1" と "img2")。各リンクには「リンク」クラスがあり、異なる画像のペアをロードします。したがって、最初のリンクは画像 1A と画像 1B をロードし、2 番目のリンクは画像 2A と 2B をロードします。私は2つの配列に画像を持っています。

ただし、私が望むように呼び出しをアタッチする代わりに、ページの読み込みが停止した後、配列の最後の 2 つの画像を読み込むことになります。さらに、リンクをクリックしても何も起こりません!

var loadImages =
{
    init: function()
    {
        var links = $( ".link" );
        myArray1 = [ 
            "imgs/png/image1.png",
            "imgs/png/image2.png",
            "imgs/png/image3.png",
        ];
        myArray2 = [ 
            "imgs/jpg/image1.jpg",
            "imgs/jpg/image2.jpg",
            "imgs/jpg/image3.jpg",
        ];
        for ( var i = 0, ii = links.length; i < ii; i++ )
        {
            $( links[ i ] ).bind( "click", loadImages.imgLoader( myArray1[ i ],
                myArray2[ i ] ) );
        }
    },
    imgLoader: function( firstURI, secondURI )
    {
        document.getElementById( "img1" ).src = firstURI;
        document.getElementById( "img2" ).src = secondURI;
    }
};
loadImages.init();
4

2 に答える 2

0

.each()メソッドを使用してみてください。

var loadImages = {
  init: function(){
    var myArray1 = ['imgs/png/image1.png', 'imgs/png/image2.png', 'imgs/png/image3.png'];
    var myArray2 = ['imgs/jpg/image1.jpg', 'imgs/jpg/image2.jpg','imgs/jpg/image3.jpg'];
    $('.link').each(function(i){
      $(this).click(function(){
        loadImages.imgLoader(myArray1[i], myArray2[i]);
      });
    });
  },
  imgLoader: function(firstURI, secondURI){
    $('#img1').attr('src', firstURI);
    $('#img2').attr('src', secondURI);
  }
};
loadImages.init();

varまた、変数がグローバル スコープを持たないようにキーワードを使用し、配列の末尾にあるコンマを削除する必要があります。の詳細については、http://api.jquery.com/each/にアクセスしてください.each()。

于 2013-06-19T00:14:08.770 に答える