Question

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

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

<div id="innerlayout">
 <ul>
  <li>Content for 1
   <a class="x" href="javascript:void(0)" rel="large-image-1.jpg" title="Caption for Large Image 1">
    <img src="learn-more.jpg" alt="Learn More Icon" width="30" height="30" />
   </a>
  </li>
  <li>Content for 2
   <a class="x" href="javascript:void(0)" rel="large-image-2.jpg" title="Caption for Large Image 2">
    <img src="learn-more.jpg" alt="Learn More Icon" width="30" height="30" />
   </a>
  </li>
 </ul>
</div>

我目前的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();
  }
 );
});

这样可以正常工作，但我希望更改它，以便隐藏而不是删除附加的段落，＆lt; a＆gt;的类。标签改为“x”以外的其他东西以及随后的这种新分类的悬停＆lt; a＆gt;会显示现有的内容。我想出了这个，但是这继续在每个后续的悬停中附加内容，尽管改变了＆lt; a＆gt;元素类。任何人都可以向我建议我在这里做错了什么，以及我如何解决它？提前谢谢。

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

Answer 1

您的专线$(this).append($("<p class='revealer'><img src='"+path+"' /><br />"+text+"</p>"));。这就是你做错了。在每个悬停上添加元素。如果您要追加，请确保在mouseout上删除此元素。否则将其附加到load上，将其隐藏起来，show将其hover或mousein。

Answer 2

而不是

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

你可以尝试

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

否则创建div或span标记，只需替换该特定标记。

希望这能解决你的问题。

jQuery - 如何停止将连接附加到类选择的元素？

2 个答案: