1

他の人が使用できるように、jQuery を少しずつ繰り返しています。

ただし、これを機能させるには、dom ツリーを上から下にトラバースすることを望んでいます。これは、効果がページ全体に影響を与えるのではなく、ラッピング div 内に留まるようにするためです。(同じ 'wrappingdivclass' とそのコンテンツの複数の反復を想定しています)

<div class="wrappingdivclass" >
  <h4>series name</h4>
     <div class="hoverheaders">
         <p class="hoverheading"><!-- TEXT HERE (FOR INITIAL IMAGE) !-->image</p>
         <p class="hoverheading1"><!-- IMAGE TWO TEXT !-->image</p>
         <p class="hoverheading2"><!-- IMAGE THREE TEXT !-->image</p>
        <p class="hoverheading3"><!-- IMAGE FOUR TEXT !-->image</p>    
     </div>
     <div class="hovercontents">
          <p class="hovercontent">athing</p>
          <p class="hovercontent1">athing</p>
          <p class="hovercontent2">athing</p>
          <p class="hovercontent3">athing</p>
      </div>
</div>

jquery (外部ファイルに存在) これらは hoverheading1-3 および hovercontent1-3 に対して反復します

例：

//does not work
jQuery(document).ready(function() {
  jQuery(".hovercontent").show();
  jQuery(".hoverheading").hover(function()
  {
    $(this).parent().children(".hovercontent").show()
    $(this).parent().children(".hovercontent").siblings().hide();
  });
});
//      $(".hovercontent2").siblings().hide();
  });
});

例 2:

//also does not work
jQuery(document).ready(function() {
  jQuery(".hovercontent1").hide();
  //toggle the componenet with class msg_body
  jQuery(".hoverheading1").hover(function()
   {
    jQuery(this).closest(".hovercontent1").show();
    jQuery(this).closest(".hovercontent1").siblings().hide();
  });
});
4

1 に答える 1

1

$ を使用するか、JQuery を使用してください。それらを混在させることは避けるべきです....子孫セレクターを使用することも有益です。

$(".wrappingdivclass > .hovercontents > .hovercontent2")

//親要素が「wrappingdivclass」である「hovercontents」の親要素を持つクラス「hovercontent2」の要素を選択します

$(".wrappingdivclass .hovercontent2")

//「wrappingdivclass」の間接的な子孫であるクラス「hovercontent2」の要素を選択します。間接的とは、直接の子である必要がないことを意味します....孫などである可能性があります....

于 2012-12-12T16:42:40.937 に答える