jQuery-如何停止向类选择的元素追加connect？

我有一个页面描述了人们可以实现的各种选项。为了更好地定义这些解释，我有一个图标，在悬停处显示一个大的相关图像

这方面的html看起来像（为了简单起见，我只在类x中包含了2个元素，但实际上会有更多）

1的内容

内容为2

我目前拥有的jQuery如下所示

$document.ready(function() {
 $('a.x', $('#innerlayout')).hover(
  function () {
   var path = $(this).attr('rel');
   var text = $(this).attr('title');
   $(this).append($("<p class='revealer'><img src='"+path+"' /><br />"+text+"</p>"));
   $('p.revealer').hide().fadeIn(500);
  }, 
  function () {
   $(this).find('p:last').remove();
  }
 );
});

$document.ready（函数（）{
$（'a.x'，$（'#innerlayout'）。悬停(
函数（）{
var path=$（this.attr（'rel'）；
var text=$（this.attr（'title'）；
$（this）.append（$（“

“+text+”
”）；
$（'p.revealer'）.hide（）.fadeIn（500）；
}, 
函数（）{
$（this.find（'p:last'）.remove（）；
}
);
});

这很好，但我希望更改它，使附加的段落被隐藏而不是删除，标记的类更改为“x”以外的其他内容，并且这个新分类的后续悬停将显示现在存在的内容。我提出了这个方法，但是尽管元素类发生了变化，它仍然会在随后的每次悬停中附加内容。有人能告诉我我做错了什么，以及我该如何修复它吗？提前谢谢

$(document).ready(function() {
 $('a.x', $('#innerlayout')).hover(
  function () {
   var path = $(this).attr('rel');
   var text = $(this).attr('title');
   $(this).append($("<p class='revealer'><img src='"+path+"' /><br />"+text+"</p>"));
   $('p.revealer').hide().fadeIn(500);
  }, 
  function () {
    $(this).find('p:last').hide();
    $(this).removeClass('x').addClass('revealed');
  }
 );
 $('a.revealed', $('#innerlayout')).hover(
  function() {
   $(this).find('p').show();
  }, 
  function () {
    $(this).find('p').hide();
    }
 );
});

$（文档）.ready（函数（）{
$（'a.x'，$（'#innerlayout'）。悬停(
函数（）{
var path=$（this.attr（'rel'）；
var text=$（this.attr（'title'）；
$（this）.append（$（“

“+text+”
”）；
$（'p.revealer'）.hide（）.fadeIn（500）；
}, 
函数（）{
$（this.find（'p:last'）.hide（）；
$（this.removeClass（'x'）.addClass（'discovered'）；
}
);
$（'a.discovered'，$（'#innerlayout'）。悬停(
函数（）{
$（this.find（'p'）.show（）；
}, 
函数（）{
$（this.find（'p'）.hide（）；
}
);
});

您的行

$（此）.append（$（“

“+text+”
”）。这就是你做错的地方。在每次悬停时追加元素。如果要追加，请确保在
mouseout
上删除此元素。否则，将其附加到
加载
，将其隐藏，并将其显示在
悬停
或
鼠标输入
上，而不是

$(this).append($("<p class='revealer'><img src='"+path+"' /><br />"+text+"</p>"));

否则，创建一个div或span标记并替换该特定标记

希望这能解决您的问题。
您介意创建一个吗？您的意思是您的代码发生了类似的情况。@juzerali，很抱歉以前没有使用小提琴，但在以后的问题中会记住它。类
x
不会在
mousein
上删除，它实际上是在
mouseout
上删除的，因此您要在从DOM元素中删除类
x
之前进行追加。编辑：由于您使用的是
$（此）
元素将被追加，即使您删除了该类。当该类已更改时，为什么它会继续追加选择器$（'a.x'），因此理论上$（'a.discovered'）需要作为选择器？在mousein上未删除类
x
，它实际上是在mouseout中删除的，因此您要在类
x
从DOM元素中删除之前进行追加。由于您使用的是$（this），因此即使删除该类，也会追加元素。
$(this).append($("<p class='revealer'><img src='"+path+"' /><br />"+text+"</p>"));

$(this).html("your content") //if you want to replace the whole content