jQuery从select中获取值然后更改div的css

Question

我一直在尝试使用这个例子,但对于我的生活,我无法使它工作.
从选择中更改Div的背景

任何帮助我继续前进的输入都将非常感激

<script>
#changemybg {
       background: url(images/default.jpg) no-repeat 50% 50%;
}
</scipt>

<div id="changemybg"></div>

<select name="change" id="backgrounds">
<option>bg</option>
<option>bg1</option>
<option>bg2></option>
</select>

BG = background.jpg
BG1 = background1.jpg
BG2 = background2.jpg

Answer 1

存储映射的方式不是很灵活.我把它们存储为一个对象.

如果将它们命名为bg,bg2等等,并没有他们的范围,你需要访问他们为window['bg' + i]这是凌乱.

var bg = {
  'bg': 'background.jpg',
  'bg1': 'background1.jpg',
  'bg2': 'background2.jpg' 
};

$('#backgrounds').change(function() {
   var background = $(this).find('option:selected').text();

   if ( ! background in bg) {
       return;
   } 

   $('#changemybg').css({
      'backgroundImage': 'url(' + bg[background] + ')'
   });
});

jsFiddle.

或者,您可以将文件名存储在value每个option元素的属性中,并简单地指定backgroundImageto $(this).val().

此外,您正在尝试在script元素内设置样式.那不行; 你想要的是一个style元素.