0

質問のシナリオを適切に説明するのに苦労しました。私は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タグを削除し、正常に機能しました。コンテンツが非表示になるように変更してみたかったのですが、クラスを変更して、mousenterが再度発生した場合に既存のコンテンツだけが表示されるようにしました。代わりに、それでもコンテンツが再び追加され、各入力/出力でスタックすることがわかりました。誰かが私がどこで間違っているのか提案できますか？

4

3 に答える 3

0

自分で.append（）を避け、jQuery .html（）でaを使用します。

  $('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を空白に書き直すことができます。

于 2012-03-20T17:46:59.700 に答える
0

要素を一度だけ追加し、ホバーで表示/非表示にする必要があります。

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

要素の挿入をホバーの外に移動することで、何度も作成されることはありません。

于 2012-03-20T17:44:02.430 に答える
0

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

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

于 2012-03-26T11:32:24.683 に答える