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

Posted 2023-05-09

【中文标题】在 jQuery 中，如何显示以前附加的内容而不再次附加？

【英文标题】：In jQuery how can I show content previously appended without appending again?

【发布时间】：2012-04-05 05:33:31

【问题描述】：

努力充分描述问题中的场景。我正在努力学习 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();
  
 );
);

html 基本上是

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

我以前使用 remove() 来删除 mouseout 时的 p 标签并且工作正常。我想尝试更改它以便隐藏内容，并且更改类以便如果再次发生 mouseenter 它只会显示现有内容。相反，我发现它仍然会再次附加内容并在每次输入/输出时叠加。谁能建议我哪里出错了？

【参考方案1】：

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

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

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

【参考方案2】：

我自己会避免使用 .append()，并且可以将 a 与 jQuery .html() 一起使用。

  $('a.x', $('#innerlayout')).hover( 
  function ()  
   var path = $(this).attr('rel'); 
   var text = $(this).attr('title'); 
   $(this).children("span").html("<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"); 
   
 ); 

然后 HTML 类似：

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

抱歉，我没有对其进行测试，但希望能让您走上正轨。 然后，您可以隐藏跨度，或将 HTML 重写为空白。

【参考方案3】：

我最终使用了这个解决方案，它提供了我想要的功能。

$(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");
  
 );
);

使用此 HTML

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

原来title属性是用来提供var文本的，但我发现我偶尔需要在此处包含html，所以采用了这种方法。