我有一个链接列表。我想要做的是使用jQuery将函数附加到每个链接;当单击链接时,该函数将运行,并且一对图像将被加载到div中(img id“img1”和“img2”)。每个链接都有“链接”类,并将加载一对不同的图像。因此,第一个链接将加载Image 1A和Image 1B,第二个链接将加载Image 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();
答案 0 :(得分:2)
您没有绑定回调功能。执行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]);
});
答案 1 :(得分: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
,以便您的变量没有全局范围,并删除数组末尾的逗号。有关.each()
的详细信息,请访问http://api.jquery.com/each/。