javascript - 使用 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

您的目标是一个类而不是一个 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 2

有大约一百万种不同的方法，我选择的是包装#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 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');
});