Question

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

<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（这个）;我点击了正确的链接，显示了正确的类，所以我不知道为什么我的未定义。

感谢。

Answer 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添加一个公共类，而只是单独调用$(.your-common-class)而不是每个。

Answer 2

你未定义因为：

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

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

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

使用jQuery的未定义的html属性

2 个答案: