6

私を助けてくれてありがとう（時間があり、喜んでいる人のために）。

私はこのスクリプトを書きました：

$(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/portfolio/test.phpに配置します。

もちろん、私がホバリングしているものだけでなく、適切なクラスを持つすべての要素を表示/非表示にする以外は機能します。数十あり、データベース主導のコンテンツになるため、それぞれに一意の名前を付けることはできません.

スクリプト内でホバリングしているアイテムを分離する簡単な方法を知っている人はいますか?

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

4

4 に答える 4

8

変数「this」は、mouseover および mouseout ハンドラーのトリガー要素にバインドされているため、次のように言うことができます。

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

トリガー要素内のクラス「foliobtn」を持つ要素を非表示にします。

于 2009-12-18T23:59:57.200 に答える
5

別の関数をコールバックとして使用できます。これは効果的に並べ替えのトグルとして機能し、コードをよりシンプルにします。

これを試してみてください：

$(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 falseclickまたはフォームの送信などに適して<a>いますが、実際にはpreventDefault()代わりに使用することをお勧めします。

于 2009-12-19T00:03:48.253 に答える
0

これを試していただけますか？

$(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; });
于 2009-12-18T23:58:12.053 に答える
0

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();
  });
});

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

于 2009-12-18T23:58:53.620 に答える