在 jQuery 中,如何显示以前附加的内容而不再次附加?
Posted
技术标签:
【中文标题】在 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,所以采用了这种方法。
【讨论】:
以上是关于在 jQuery 中,如何显示以前附加的内容而不再次附加?的主要内容,如果未能解决你的问题,请参考以下文章
如何替换 div 的内容而不是使用 JQuery 附加一个值?