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 に答える