Javascript 图像库中的活动拇指
我制作了这个图像库,但我想给活动拇指一个class=“active”。如果我点击.small_图像,我可以给它一个类“active”,但当我点击其他拇指后,它们都会得到一个类“active”。所以我想如果我做一个if语句,如果大图像和缩略图的rel和src是相同的,给一个类“active”,但是我的代码不起作用。谁能告诉我我做错了什么 尝试以下操作:(-在Javascript 图像库中的活动拇指,javascript,jquery,html,Javascript,Jquery,Html,我制作了这个图像库,但我想给活动拇指一个class=“active”。如果我点击.small_图像,我可以给它一个类“active”,但当我点击其他拇指后,它们都会得到一个类“active”。所以我想如果我做一个if语句,如果大图像和缩略图的rel和src是相同的,给一个类“active”,但是我的代码不起作用。谁能告诉我我做错了什么 尝试以下操作:(-在周围添加了红色边框。活动的) 对于.css('display','block'),您可以使用.show()不起作用,我认为我的if语句没有错
周围添加了红色边框。活动的)
对于.css('display','block'),您可以使用.show()不起作用,我认为我的if语句没有错。谢谢,这是有效的,但现在我只需要在没有单击thumb时为第一个缩略图指定一个活动的类。@t-updated。检查我的代码中的最后一行,JSFIDLE通过以下方式工作:$(“#small_images.small_image”).first().addClass('active')@Robber我不觉得我在回答的最后一行的方式更有效率吗
$(document).ready(function () {
$(".small_image").click(function () {
event.preventDefault();
var image = $(this).prop("rel");
$('#under').prop('src', image);
$('#above').fadeOut(600, function () {
$('#above').prop('src', $('#under').prop('src')).css('display', 'block');
});
});
if($(".small_image").prop("rel") == $("#under").prop('src', image)){
$(this).addClass('active');
}
});
$(".small_image").click(function () {
event.preventDefault();
$('.small_image.active').removeClass('active'); // remove "active" from current image
$(this).addClass('active'); // add "active" to the new one
var image = $(this).prop("rel");
$('#under').prop('src', image);
$('#above').fadeOut(300, function () {
$('#current_image #above').prop('src', $('#current_image #under').prop('src'));
});
}).eq(0).addClass('active'); // set the first one as "active" by default