0

divs当用户单击按钮时，我正在尝试在多个图像之上添加图像。

所以

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

button

单击按钮后

oo 表示图像

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

我不知道如何做到这一点。任何提示将不胜感激。谢谢。

4

3 回答 3

2

我将采用与“其他所有假设”不同的假设。这是一个用于演示的jsfiddle

此解决方案允许任意 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");
});​

​</p>

于 2012-08-13T16:43:58.330 回答
1

我假设以下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根据您的需要进行修改。

于 2012-08-13T16:34:49.567 回答
0

您可能会更好地使用<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')");
});

这是一个有效的现场演示。

于 2012-08-13T16:41:58.123 回答