如何将图像添加到多个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 是一个有效的现场演示。