jQuery從select中獲取值，然後更改div的css

我一直在試圖使用這個例子，但對於我的生活我無法得到它的工作。
Change background of Div from select jQuery從select中獲取值，然後更改div的css

任何輸入幫我相處移動將非常讚賞

<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

來源

2011-04-25 William

你存儲映射的方式不是很靈活。我將它們存儲爲一個對象。

如果您將它們命名爲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元素。

來源

2011-04-25 03:50:19 alex

啊！謝謝你指出，我是在一個循環中創建這些表單，並完全忘記添加值如果值名稱與選項相同，上面的代碼會是什麼樣的？ – William 2011-04-25 04:01:36

@William根據上面提到的，刪除'bg'，'background'變量和相關代碼，並將'backgroundImage'屬性設置爲'$（this）.val（）'。 – alex 2011-04-25 04:04:15

測試下面的代碼：

$("#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>

來源

2011-04-25 03:51:24

jQuery從select中獲取值，然後更改div的css

回答

相關問題