如何將圖像添加到多個div

Question

我想在用戶單擊按鈕時在多個divs之上添加圖像。

所以

---------- 
|   | 
---------- 
---------- 
|   | 
---------- 
---------- 
|   | 
---------- 
---------- 
|   | 
---------- 

button 

點擊一個按鈕

OO後意味着圖像

---------- 
|oo  | 
---------- 
---------- 
|   | 
---------- 
---------- 
|oo  | 
---------- 
---------- 
|   | 
---------- 

我不知道如何做到這一點。任何提示將不勝感激。謝謝。

Answer 1

我打算採用與「每隔一個」不同的假設。這裏有一個jsfiddle for demonstration

這個解決方案允許任何div在按鈕點擊時獲取圖像，只要你已經識別它們或以某種方式標記它們。所以...

如果你的DOM確定哪些元素應該通過一些類的命名獲得一個畫面：

<div class="yes"> </div> 
<div class="no"> </div> 
<div class="yes"> </div> 
<div class="no"> </div> 
<button id="button">Click me</button>​ 

並與一些CSS像如下：

.picture{ 
    background-image: url("http://lorempixel.com/200/100/") 
} 

所有你需要的是像這樣的功能：

$('#button').on('click', function() { 
    $('.yes').addClass("picture"); 
});​ 

Answer 2

我想下面的HTML：

HTML

<div class="hasimg"></div> 

<div class="hasimg"></div> 

<div class="hasimg"></div> 

<div class="hasimg"></div> 

然後在點擊鏈接試試這個：

jQuery的

$('button').on('click', function() { 
    $('div.hasimg:nth-child(2n+1)').append('<img src="" width="" height="">'); 
}); 

這裏，'div.hasimg:nth-child(2n+1)'將選擇每個奇數div與class=hasimg。

爲了使該圖像頂部，你可以使用一些CSS像下面：

CSS

div.hasimg { 
    position: relative 
} 
div.hasimg img { 
    z-index: 100; 
    position: absolute; 
    /* and necessary config */ 
} 

就修改CSS爲您的需要。

Answer 3

您最好使用<table>以獲得穩定的佈局，例如;

<table> 
    <tr><td>Row with Index #0</td></tr> 
    <tr><td>Row with Index #1</td></tr> 
    <tr><td>Row with Index #2</td></tr> 
    <tr><td>Row with Index #3</td></tr> 
</table> 

而且我認爲你正在尋找一個類似的解決方案;

$('#mybutton').click(function() { 
$("tr:odd").css("background-image", "url('http://jsfiddle.net/favicon.png')"); 
}); 

Here是一個工作現場演示。