Question

挣扎着充分描述问题中的情景。我正在尝试学习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" width="40" height="40" alt="Icon" />
</a>

我之前使用remove（）来删除mouseout上的p标签并且工作正常。我想尝试更改它，以便隐藏内容，并更改类，以便如果再次出现鼠标，它将只显示现有内容。相反，我发现它仍然会再次附加内容，并在每次输入/输出时叠加。任何人都可以建议我哪里出错了？

Answer 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);
      },
      ...

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

Answer 2

我自己会避免使用.append（），并使用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" width="40" height="40" alt="Icon" />      
</a>

道歉，因为我没有测试过，但希望能让你走上正轨。然后，您可以隐藏范围，或者将HTML重写为空白。

Answer 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" width="15" height="15" alt="Image available icon" />
 <span class="y" style="display:none;">Any follow up content required</span>
</a>

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

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

3 个答案: