在jQuery中，如何显示以前附加的内容而不再次追加？

难以充分描述问题中的情景。我正在努力学习jQuery，所以毫无疑问，在我已经掌握的知识中会有大量错误

这是我到目前为止所使用的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').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（）；
}
);
});

HTML基本上是

<a class="x" href="javascript:void(0)" rel="image1.jpg" title="Image">
 <img src="icon.jpg" width="40" height="40" alt="Icon" />
</a>

---

我以前的版本使用remove（）删除mouseout上的p标记，效果很好。我想尝试并更改它，以便内容只是隐藏的，并且更改了类，以便如果再次出现mousenter，它将只显示现有的内容。相反，我发现它仍然会再次追加内容，并在每次输入/输出时堆叠起来。有人能告诉我哪里出错了吗？

您应该只追加元素一次，并让悬停显示/隐藏它：

 $('a.x', $('#innerlayout')).each(function() {
     var path = $(this).attr('rel');
     var text = $(this).attr('title');
     $(this).append($("<p class='revealer'><img src='"+path+"' /><br />"+text+"</p>").hide())
 });

 $('a.x', $('#innerlayout')).hover(
     function () {
         $('p.revealer').fadeIn(500);
      },
      ...

$（'a.x'，$（'#innerlayout'））。每个（函数（）{
var path=$（this.attr（'rel'）；
var text=$（this.attr（'title'）；
$（this）.append（$（“

“+text+”
”）.hide（））
});
$（'a.x'，$（'#innerlayout'）。悬停(
函数（）{
美元(p.revealer).法代因(500美元),；
},
...

通过将元素插入移动到悬停的外部，它不会被一次又一次地创建。

我会避免使用.append（），或者将a与jQuery.html（）一起使用

$（'a.x'，$（'innerlayout'））。悬停（
函数（）{
var path=$（this.attr（'rel'）；
var text=$（this.attr（'title'）；
$（this.children（“span”）.html（

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

然后，HTML将显示如下内容：

<a class="x" href="javascript:void(0)" rel="image1.jpg" title="Image">
 <span></span>
 <img src="icon.jpg" width="40" height="40" alt="Icon" />      
</a>  

抱歉，我还没有测试过它，但希望能让你走上正轨。

---

然后，您可以隐藏跨度，或者将HTML重写为空白。

我最终使用了这个解决方案，它提供了我所寻求的功能

$(document).ready(function() {
 $('a.x', $('#innerlayout')).hover(
  function () {
  if($(this).hasClass('revealed')){
    $(this).find('p.revealer').fadeIn(500);
  }
  else{
   var path = $(this).attr('rel');
   var text = $(this).find('span.y').html();
   $(this).append($("<p class='revealer'><img src='"+path+"'/><br />"+text+"</p>"));
   $(this).find('p.revealer').hide().fadeIn(500);
   }
  }, 
  function () {
    $(this).find('p.revealer').hide();
    $(this).addClass("revealed");
  }
 );
});

$（文档）.ready（函数（）{
$（'a.x'，$（'#innerlayout'）。悬停(
函数（）{
if（$（this）.hasClass（'discovered'））{
$（this.find（'p.revealer'）.fadeIn（500）；
}
否则{
var path=$（this.attr（'rel'）；
var text=$（this.find（'span.y'）.html（）；
$（this）.append（$（“

“+text+”
”）；
$（this.find（'p.revealer'）.hide（）.fadeIn（500）；
}
}, 
函数（）{
$（this.find（'p.revealer'）.hide（）；
$（此）.addClass（“显示”）；
}
);
});

使用此HTML

<a class="x" href="javascript:void(0)" rel="image1.jpg">
 <img src="radio-hover.png" width="15" height="15" alt="Image available icon" />
 <span class="y" style="display:none;">Any follow up content required</span>
</a>

最初，title属性用于提供var文本，但我发现偶尔需要在这里包含html，因此采用了这种方法

<a class="x" href="javascript:void(0)" rel="image1.jpg">
 <img src="radio-hover.png" width="15" height="15" alt="Image available icon" />
 <span class="y" style="display:none;">Any follow up content required</span>
</a>