クラス別jQueryの表示/非表示、複数の項目が言ったクラスが含まれている場合

Question

（時間を持っていると喜んでいる人のために）私を助けを事前に感謝します。

私はこのスクリプトを書いてます：

$(document).ready(function() {
  // hides the slickbox as soon as the DOM is ready
  // (a little sooner than page load)
  $('.foliobtn').hide();
  $('.folionamedate').show();

  // shows the slickbox on clicking the noted link
  $('.foliobottom').mouseover(function() {
    $('.foliobtn').show();
    return false;
  });
  $('.foliobottom').mouseout(function() {
    $('.foliobtn').hide();
    return false;
  });
  $('.foliobottom').mouseover(function() {
    $('.folionamedate').hide();
    return false;
  });
  $('.foliobottom').mouseout(function() {
    $('.folionamedate').show();
    return false;
  });
});

このページ http://www.fraservalley-webdesign.com/上にそれを置きますポートフォリオ/ test.phpをでます。

これはもちろんショーのそれを除いて動作します/適切なクラスではなく、私は上をホバリングしていただ一つですべての要素に非表示になります。数十が存在するであろうように、私は一意それぞれに名前を付けることができないと、それはデータベースドリブンコンテンツになります。

誰もが、私はスクリプト内で上をホバリングしていた項目を隔離するための簡単な方法を知っていますか？

これは理にかなっていますか？

Answer 1

あなたが

のようなものを言うことができるように、

変数は、「これは」、マウスオーバーとマウスアウトハンドラでトリガー要素にバインドされています

$('.foliobtn',this).hide();

トリガー要素内部クラス「foliobtn」の要素を非表示にする。

Answer 2

あなたは、これが効果的に一種のトグルとして働き、そしてあなたのコードを簡単になり、コールバックとして別の関数を使用することができます。

このショットを付けます：

$(document).ready(function() {

  // hides the slickbox as soon as the DOM is ready
  // (a little sooner than page load)
  $('.foliobtn').hide();
  $('.folionamedate').show();

  // shows the slickbox on clicking the noted link
  $('.foliobottom').hover(function() {
    $(this).find('.foliobtn').show();
  }, function() {
    $(this).find('.foliobtn').hide();
  });

});

ブラウザがこの要素には、デフォルトの動作がないため、

また、この場合にはreturn falseする必要はありません。

return falseはclickまたはフォーム提出のため<a>のようなもののためのより適切ですが、本当にあなたはおそらく代わりにpreventDefault()を使用したいと思います。

Answer 3

あなたはjqueryのバインド方法を使用する必要があります

のようなもの。

$(document).ready(function() {
  // hides the slickbox as soon as the DOM is ready
  // (a little sooner than page load)
  $('.foliobtn').hide();
  $('.folionamedate').show();

  // shows the slickbox on clicking the noted link
  $('.foliobottom').mouseover(function(e) {
     $(this).find('.foliobtn').show(); 
     $(this).find('.folionamedate').hide();
  });
  $('.foliobottom').mouseout(function(e) { 
     $(this).find('.foliobtn').hide(); 
     $(this).find('.folionamedate').show();
  });
});

ここでは、クラスに基づいて、すべての要素の可視性を変更するが、このクラスを使用して要素を見つけ、現在のノード

はありません

Answer 4

あなたはこれを試してもらえますか？

$(document).ready(function() {
    // hides the slickbox as soon as the DOM is ready
    // (a little sooner than page load)

    $('.foliobtn').hide();
    $('.folionamedate').show();

    // shows the slickbox on clicking the noted link
    $('.foliobottom').mouseover(function() { $(this).show(); return false; });
    $('.foliobottom').mouseout(function() { $(this).hide(); return false; });