0

单击拇指时，我正在尝试加载图像。用户点击：

<li><a href="#" class="01"><img src="images/thumbimg1.jpg" alt="thumbnail 1" /></a></li>

我使用的 jQuery 是：

var divs = $('#img01, #img02, #img03, #img04, #img05, #img06, #img07, #img08, #img09, #img10');
var classNumber = $(this).attr('class');
var thumb = 'thumb';
var html = '.html';
$(divs).hide();

//$("#img01" + $(this).attr("class")).load(thumb+number+html).fadeIn();

$('ul#thumbs li a').click(function(){
    $(divs).hide();
    $('#img' + $(this).attr('class')).load(thumb+classNumber+html).fadeIn();
});
});

当我查看控制台时，classNumber 只是以未定义的形式返回。

当我做 console.log(this); 我点击了正确的链接，显示了正确的类，所以我不知道为什么我没有定义。

谢谢。

4

2 回答 2

1

你变得不确定，因为：

var classNumber = $(this).attr('class');

被绑定在循环之外，所以 this 不是指元素，而是指窗口。在上面的代码中，您正在尝试有效地尝试执行此操作：

var classNumber = $(window).attr('class');

你需要这样做：

$('ul#thumbs li a').click(function(){
    var classNumber = $(this).attr('class');
    $(divs).hide();
    $('#img' + $(this).attr('class')).load(thumb+classNumber+html).fadeIn();
});
于 2013-03-03T10:55:14.393 回答
1

您的classNumber变量正在a被单击的特定范围之外声明。相反，您需要在点击处理程序中定义它；

$('ul#thumbs li a').click(function(){
    var classNumber = $(this).attr('class');

    $(divs).hide();
    $('#img' + $(this).attr('class')).load(thumb+classNumber+html).fadeIn();
});

FWIW，您可能想要选择另一个属性而不是class，因为如果您在以后的生活中添加其他类，这将中断。使用自定义属性 ( data-*)，或窃取其他属性，例如title.

您可能还想考虑向所有#img's 添加一个公共类，并简单地调用$(.your-common-class)而不是单独调用它们中的每一个。

于 2013-03-03T10:50:03.847 回答