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

СКИДКА: http://jsfiddle.net/g6Myb/

Как я могу получить #two и поставить его на #one с помощью jQuery после нажатия span # click?

<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 ?
-6
Mark Noosted 22 Янв 2013 в 19:21

3 ответа

Лучший ответ

Есть около миллиона различных способов сделать это, один из которых я выбрал, чтобы обернуть #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");
})
0
Roko C. Buljan 22 Янв 2013 в 15:44

Вы захотите создать новый класс 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');
});
0
Ben Felda 22 Янв 2013 в 15:32

Вы нацеливаетесь на класс вместо идентификатора

$('.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') );
});

Если ваши элементы содержат текст, это может быть не тот метод, который вам нужен ...

Поэтому, если вы хотите OVERLAY #two превысить #one, вы можете использовать offset:

демонстрационная версия jsBin

$('#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/

DOCS: http://api.jquery.com/ (читайте всегда. это ваши инструменты!)

0
Roko C. Buljan 22 Янв 2013 в 15:38