jquery - 将鼠标悬停在 para 上应该在 jquery 中显示相同的内容

Question

每当我悬停“p”时，它应该显示“重复”之类的内容并单击“重复”以悬停的段落应该显示在“p”下面我尝试一些事情......

<div id="one">
<p>This is para, when i hover i will appear. </p>
<p>This is another, when i hover i will appear. </p>
<h4 id="o"><a href="#one">Duplicate</a></h4>
<div class="tex"></div>
<ul>
</ul>
</div>

和 jquery 是

var id = '';
 $("p").hover(function() {
id = $(this).text();
$("#o").show();
},
function() {
$("#o").delay(2000).fadeOut("slow");
 });

$("#o").click(function() {
 $(id).appendTo("tex");
  });

在这里我犯了一些错误。但我不知道。

Answer 1

这是您想要的完整答案。

HTML

 <div id="one">
 <p>This is para, when i hover i will appear.</p>
 <p>This is another, when i hover i will appear.</p>
 <h4 id="o"><a href="#one">Duplicate</a></h4>
 </div>

这里的jquery

(function($) {
$.fn.outerHTML = function(s) {
return (s)
? this.before(s).remove()
: $('<p>').append(this.eq(0).clone()).html();
}
})(jQuery);

var is, id = '';
$("p").live({
    mouseover: function() {
   is = $(this);
    id = $(this).outerHTML();
     $("#o").insertBefore(is).show();
  },
  mouseout: function() {
    $("#o").delay(2500).fadeOut("slow");
  }
});
$("#o").click(function() {
 $(is).after(id);
});

这里的演示：jsfiddle

Answer 2

您正在使用idas 选择器，这是不对的。

var txt = '';
$("p").hover(function () {
    txt = $(this).text();
    $("#o").show();
},

function () {
    $("#o").delay(2000).fadeOut("slow");
});

$("#o").click(function () {
    $('.tex').append(txt);
});

Answer 3

试试这个

$('.tex').append(id);

代替

$(id).appendTo("tex");

您正在尝试将文本转换为 jquery 对象$(id)..您想要做的是使用 class=tex 将文本附加到您的元素

http://jsfiddle.net/wirey00/9vg8u/5/