0

私はいくつかのインスタンスを持っています

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

ページ上で..すべて独立して動作する必要がありますが、同じjqueryを呼び出します。ご覧のとおり、同じ HTML の 2 つのブロックが表示されます...

dom ツリーを上下に移動して、wappingclass div 内のもののみにホバー/表示非表示を保持し、次のラッピングクラス div のすべてにも影響を与えないようにするにはどうすればよいですか。

<div class="wrappingclass" id="notthesecondone">
 <div class="hoverheaders">
     <p class="hoverheading">on hover display stuff</p>
     <p class="hoverheading1">on hover display stuff1</p>
     <!-- iterate, as needed !-->
    </div>
     <div class="hovercontents">
      <p class="hovercontent">stuff</p>
      <p class="hovercontent1">stuff1</p>
              <!-- iterate, as needed !-->
  </div>
    <div class="wrappingclass" id="notthefirstone">
 <div class="hoverheaders">
     <p class="hoverheading">on hover display stuff/hide stuff1</p>
     <p class="hoverheading1">on hover display stuff1/hidestuff</p>
     <!-- iterate, as needed !-->
    </div>
     <div class="hovercontents">
      <p class="hovercontent">stuff</p>
      <p class="hovercontent1">stuff1</p>
              <!-- iterate, as needed !-->
  </div>

ここにjqueryがあります：

//does not work
jQuery(document).ready(function() {
  jQuery(".hovercontent").show();
  //toggle the componenet with class msg_body
  jQuery(".hoverheading").hover(function()
  {
     jQuery(this).parent().children(".hovercontent").show()
    jQuery(this).parent().children(".hovercontent").siblings().hide();
  });
});
4

1 に答える 1

0

交換してみてください

jQuery(this).parent().children(".hovercontent").show()
jQuery(this).parent().children(".hovercontent").siblings().hide();

と

jQuery('.hovercontent').hide();
jQuery(this).closest('.hovercontent').show

編集

に置き換えhoverますmouseover

最終編集、

その実際にはこのように..（DOMの準備ができている内部）

$("p[class^=hovercontent]").hide();
//toggle the componenet with class msg_body
$("p[class^=hoverheading]").mouseover(function() {
    $("p[class^=hovercontent]").hide();
    $(this).closest('.hoverheaders').next().find('p').eq($(this).index()).show();
});​

デモ-http://jsfiddle.net/68UVj/

于 2012-12-12T17:55:03.080 に答える