使用 jQuery 在其他 div 上的 div

Question

<div id="one">aaa</div>
<div id="two">bbbbbbbbbb</div>
<span id="click">click</span>

小提琴：http://jsfiddle.net/g6Myb/

如何在单击 span#click 后获得 #two 并使用 jQuery 将他放在 #one 上？

<div id="one">aaa</div>
<div id="two">bbbbbbbbbb</div>
<span id="click">click</span>

#one {width: 200px; height: 200px; background-color: red}
#two {width: 200px; height: 200px; background-color: green; opacity: 0.3 }

$('.click').click(function(){})  // what to do here ?

Answer 1

大约有一百万种不同的方法，我选择的一种是将#one 和#two 与相对定位的div 包装起来，然后在点击时将#two 移动到0X0

更新了你的小提琴：

http://jsfiddle.net/g6Myb/1/

#one {width: 200px; height: 200px; background-color: red}
#two {width: 200px; height: 200px; background-color: green; opacity: 0.3 }
#wrapper{position: relative;}
#two.on{position: absolute; top:0; left:0;}

$('#click').click(function(){
    $("#two").addClass("on");
})

Answer 2

你的目标是一个类而不是一个 ID

$('.click').click(function(){});
   ^----- USE #

你可以使用以下方法：

http://api.jquery.com/append/
http://api.jquery.com/appendto/

例子：

$('#click').click(function(){
    $('#one').append( $('#two') );
});

$('#click').click(function(){
    $('#two').appendTo( $('#one') );
});

如果您的元素包含文本，那可能不是您想要的方法...

因此，如果您希望 覆盖 #two 超过 #one，则可以使用 offset：

jsBin demo

$('#click').click(function(){
    var TWOpos = $('#one').offset();
    var pos = {X: TWOpos.left, Y:TWOpos.top };
    $('#two').css({position:'absolute', left:pos.X, top:pos.Y });
});

http://api.jquery.com/offset/

文档： http://api.jquery.com/（请务必阅读。这些是您的工具！）

Answer 3

你会想要创建一个新的 CSS 类：

.hoverOpacity{
  position:absolute;
  top: 0; //or wherever you want to put it
  right: 0;  //or whereever you want to put it
  opacity: .5; //plus all the browser specific
}

然后单击，将此类添加到 div：

$('#click').click(function(){
   $('#two').addClass('hoverOpacity');
});