Question

我想在点击div元素内的图片时创建一些内容。它应该将其颜色更改为蓝色，同时将背景颜色更改为蓝色。我写的代码是否正确？因为它不能正常工作。另外，有没有更好的方法将CSS应用于元素？

var photo = $('#photo');
var html = $('html');
var bg = $('#bg');
$(photo).on('click', function(){
  $(this).hide()
  .delay(600)
  .fadeIn(300);
  $(html, bg).css({
    background :'blue'
  });
});

HTML

<div id='bg'>
    <img id='photo' src="http://img.pixland.uz/u11878f337693s.jpg" alt="" />
</div>

Answer 1

除了Rohan Kumar's answer，这当然是完全正确的，还有一种组合jQuery选择的方法：$.fn.add。您可以向其传递HTML元素，元素数组，jQuery选择，jQuery选择器或HTML字符串。在这种情况下，我们可以传递您创建的一个jQuery对象：

在这种情况下，您可以使用html.add(bg)进行选择：

var photo = $('#photo');
var html = $('html');
var bg = $('#bg');
photo.on('click', function(){
  $(this).hide()
  .delay(600)
  .fadeIn(300);
  html.add(bg).css({
    background :'blue'
  });
});

jsFiddle

Answer 2

您正在将照片用作jquery对象，因此无需再次使用$照片，或尝试使用

var photo = '#photo';
var html = 'html';
var bg = '#bg';
$(photo).on('click', function(){
    $(this).hide()
    .delay(600)
    .fadeIn(300);
    $(html+','+ bg).css({
    // to make multiple selectors into a single one
        background :'blue'
    });
});

有关详细信息，请参阅multiple-selectors

Live Demo

jquery CSS属性选择

2 个答案: