jQueryでは、どのようにして以前に追加しなかったコンテンツをもう一度追加することができますか？

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は、マウスアウトのpタグを削除していい仕事をするには、この使用のremove（）の

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

私の以前の化身、基本的です。私はそれを変更してコンテンツを隠してしまい、クラスが変更されたので、もう一度モンスターが発生すると既存のコンテンツが表示されるようにしたいと思っていました。代わりに、私はまだそれがコンテンツを再び追加し、各入力/出力に積み重なっていることが分かります。誰かが私が間違っていると示唆することができますか？

Answer 1

私が求めている機能を提供したこのソリューションを使用してしまった。

$(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を含める必要が見つかったので、このアプローチを採用しました。

Answer 2

あなたは一度だけの要素を追加し、ホバーショーを持っている/それを隠す必要があります。

$('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 3

私は.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" width="40" height="40" alt="Icon" />  
</a> 

私はそれをテストしていませんでしたとして謝罪、うまくいけば、正しい軌道に乗ってあなたを得るために何か。 スパンを非表示にするか、HTMLを空白に書き換えることができます。