如何在jQuery中创建一个图像链接列表

How to make a list of image links in jQuery?

本文关键字：一个 图像 列表 链接 jQuery 创建      更新时间：2023-09-26

我有一个链接列表。我想做的是用jQuery给每个链接附加一个函数;当点击链接时，该函数将运行，并将一对图像加载到div中(img id为"img1"answers"img2")。每个链接都有"link"类，并将加载不同的图像对。因此，第一个链接将加载图像1A和图像1B，第二个链接将加载图像2A和2B，以此类推。我有两个数组中的图像。

然而，它没有像我想要的那样附加调用，而是在页面停止加载后加载数组的最后两个图像。更重要的是，点击链接没有任何作用!

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();

不绑定回调函数。执行loadImages.imgLoader并传递结果。

通常你可以只绑定一个回调函数，但由于你在回调本身中使用计数器变量，你需要小心i的作用域:

$(links[i]).on("click", (function(j) {
    return function() {
        loadImages.imgLoader(myArray1[j], myArray2[j]);
    }
})(i));

一个更好的方法是将事件处理程序绑定到所有的链接，并处理图像交换没有for循环:

$('.link').click(function() {
    var index = $(this).index();
    $('#img1').prop('src', myArray1[index]);
    $('#img2').prop('src', myArray2[index]);
});

尝试使用.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，这样您的变量就没有全局作用域，并删除数组末尾的逗号。关于.each()的更多信息，请访问http://api.jquery.com/each/

相关文章：