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

Question

我一直在尝试使用这个示例，但我无法让它正常工作。
Change background of Div from select

任何能帮助我继续前进的意见都将不胜感激

<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 = 背景.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 .

或者，您可以将文件名存储在每个 option 元素的 value 属性中，然后简单地将 backgroundImage 分配给 $( this).val().

此外，您正尝试在 script 元素内设置样式。那行不通；你想要的是一个 style 元素。