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

发布于 2024-11-03 07:43:21 字数 577 浏览 1 评论 0原文

我一直在尝试使用这个例子，但我一生都无法让它工作。
从选择中更改 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 =背景.jpg
bg1 = 背景1.jpg
bg2 = 背景2.jpg

原文

I've been trying to use this example but for the life of me I cannot get it working.
Change background of Div from select

Any input to help me get moving along will be very appreciated

<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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

Spring初心 2024-11-10 07:43:21

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

如果您将它们命名为 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 元素。

The way you were storing the mappings wasn't very flexible. I have stored them as an object.

If you named them bg, bg2, etc, and didn't scope them, you'd need to access them as window['bg' + i] which is messy.

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.

Alternatively, you could store the filename in the value attribute of each option element and simply assign the backgroundImage to $(this).val().

Also, you are trying to set styles inside a script element. That won't work; what you want is a style element.

回复收藏 0 原文

红颜悴 2024-11-10 07:43:21

测试下面的代码：

$("#backgrounds").change(function()
{
    var val = $(this).val();
    $("#changemybg").css("background-image",val);
});

并将您的选择更改为：

<select name="change" id="backgrounds">
<option value="background1.jpg">bg</option>
<option value="background2.jpg">bg1</option>
<option value="background3.jpg">bg2></option>
</select>

Test Below Code :

$("#backgrounds").change(function()
{
    var val = $(this).val();
    $("#changemybg").css("background-image",val);
});

and Change your select to this :

<select name="change" id="backgrounds">
<option value="background1.jpg">bg</option>
<option value="background2.jpg">bg1</option>
<option value="background3.jpg">bg2></option>
</select>

回复收藏 0 原文

~没有更多了~