javascript - 全后台更改jquery

Question

我将制作一个作品集，在您点击链接后背景会发生变化但我只能让它处理一张图片

像这样:

$(document).ready(function() {
 $('img.thumb').click(function() {
  $('#bgimg').fadeOut(500, function() {
   $(this).css('background-image', 'url(img/myfoto.jpg)');
  }).fadeIn(500);
 });
});

但我希望它能正常工作，所以当我单击 .thumb 时，它会从那里获取 src 并将其用作 url

像这样:(但它不起作用)

$(document).ready(function() {
 $('img.thumb').click(function() {
  $('#bgimg').fadeOut(500, function() {
   $(this).css('background-image', '$('.thumb').attr('src')');
  }).fadeIn(500);
 });
});

Answer 1

首先，您要在无意中创建一个字符串。这将是正确的代码行:

$(this).css('background-image', $('.thumb').attr('src'));

更好的方法是使用 this，因为它是对实际点击图片的引用。

$(document).ready(function() {
 $('img.thumb').click(function() {
  var bgSrc = $(this).attr('src'); // get the source of the image clicked
  $('#bgimg').fadeOut(500, function() {
   $(this).css('background-image', bgSrc); // and apply it to #bgimg
  }).fadeIn(500);
 });
});