他の人が使用できるように、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();
});
});