2

これが私の問題児です：

jQuery(document).ready(function() {
    var a = jQuery('img[title*="after"]');  
    a.parents('dl.gallery-item').addClass('after');
    a.addClass('after');
    var b = jQuery('img[title*="before"]');
    b.parents('dl.gallery-item').addClass('before');
    b.addClass('before');
//the following gives each image a 'name' attribute based on the caption, collapsed.
jQuery('img').each(function() {
    var f = jQuery(this).parents('dl.gallery-item').find('dd').text();
    var f = f.replace(/\s/g,'');
    jQuery(this).attr('name', f);
});
//the following takes each 'name' attribute, finds the before, and sticks it behind the after   
    jQuery('img.after').hover(function() {
        var imgName = jQuery(this).attr('name');
    //  alert(imgName);

        var afterPosition_L = jQuery(this).offset().left;
        var afterPosition_T = jQuery(this).offset().top;
        var css_string = '{ top: '+ afterPosition_T +'; left: '+ afterPosition_L +'; position: absolute; z-index: 999;}';
        var imgBefore = jQuery('img.before[name="'+ imgName +'"]');
    //  alert(imgBefore);
        jQuery(imgBefore).css(css_string);
    });

説明: 私は WordPress を使用しています (そのため、jQuery と綴ります)。WordPress は (PHP を使用して) ギャラリーに一連の画像を読み込みます。「タイトル」のいくつかのフィールドとキャプションの内容に基づいて、それが「前」か「後」かを判断し、そのクラスを画像などと画像自体をラップするタグの両方に割り当てます。また、キャプション テキストに基づいて、画像に「name」属性を割り当てます。これはすべてうまく機能しています。

「ホバー」は、物事がうまくいかない場所です。

ホバリングしても何も起こりませんが、マウスアウト時に (この記事のタイトルにある) Lint エラーがスローされます。

想定される動作: まず、ホバーされた画像の名前を取得し、それを imgName に貼り付けます (これは機能しています)。次に、ホバーされた img の位置を取得します

ここに醜いものがあります：私は $('img.before[name=""]') で画像を識別しようとします 'this'、つまりホバリングしている名前の変数を使用して、変数「imgBefore」に CSS を適用して、「後」と同じ左/上の位置に移動しようとしますが、z-index は異なります。

'img.before[name=""] は、リントが不満を言っているセレクターのようです...それは言います:

Selector: "img.before[name="CarterLivingRoom"]"
You've used the same selector more than once.

したがって、変数を正しく使用しています。マウスアウトでエラーが2回スローされるようです。おそらく「hover()」はそれを 2 回使用していますが、どうすれば回避できますか?

4

4 に答える 4

7

ここでうまくいかないことがたくさんあります。

  • jQuerydocument.ready関数は jQuery オブジェクトをパラメーターとして渡すため$、衝突を恐れずに関数内で使用できます。
  • では、複数回img.each再定義します。var f
  • 関数で同じセレクターから新しい jQuery オブジェクトを複数回再作成しています。
  • var一般に、関数の先頭で、関数ごとに 1 回使用するのが適切な形式と考えられています。これにより、誤った再宣言を避けることもできます。
  • 複数のoffsetオブジェクトを作成しています。一度呼び出すだけで、結果のオブジェクトのメンバーを使用できます。
  • jQuery オブジェクトは を返すselfので、呼び出しを連鎖させることができます! これにより、コードを大幅にクリーンアップできます。
  • 既存の jQuery オブジェクト ( imgBefore) から新しい jQuery オブジェクトを作成しています。それをする必要はありません。さらに、.css()文字列ではなくオブジェクトを取得できるため、更新がかなり簡単/クリーンになります。

リファクタリング:

jQuery(document).ready(function($) {
  $('img[title*="after"]').addClass('after').
    parents('dl.gallery-item').addClass('after');

  $('img[title*="before"]').addClass('before').
    parents('dl.gallery-item').addClass('before');

  //the following gives each image a 'name' attribute based on the caption, collapsed.
  $('img').each(function() {
    var $this = $(this), f;
    f = $this.parents('dl.gallery-item').find('dd').text().replace(/\s/g, '');
    $this.attr('name', f);
  });

  //the following takes each 'name' attribute, finds the before, and sticks it behind the after
  $('img.after').hover(function() {
    var $this = $(this), offset = $this.offset();
    $('img.before[name="' + $this.attr('name') + '"]').css({
      top: offset.top,
      left: offset.left,
      position: 'absolute',
      'z-index': 999
    });
  });
});
于 2010-12-30T00:33:10.497 に答える
1

ここで最初に目にするのは、最後の行が間違っていることです。 

jQuery(imgBefore).css(css_string);

そのはず： 

imgBefore.css(css_string);
于 2010-12-30T00:34:18.550 に答える
1

エラー メッセージは誤解を招く可能性があります。私が見る問題は次のとおりです。

jQuery(imgBefore)

冗長です。 imgBeforeはすでに jQuery ノード セットです。あなたはただ使うことができます：

imgBefore.css(css_string);
于 2010-12-30T00:28:23.673 に答える
0

私たちは昨夜遅くに解決策を見つけました。ifaourとFlaschen（ありがとう！）が指摘したように、1つの問題はimgBefore...それを正しくするために他のいくつかのステップがありました。

私たちはこれで終わりました：

// the following gives each image a class before or after based on the 'title' field
jQuery(document).ready(function() {
    var a = jQuery('img[title*="after"]');  
    a.parents('dl.gallery-item').addClass('after');
    a.addClass('after');
    var b = jQuery('img[title*="before"]');
    b.parents('dl.gallery-item').addClass('before');
    b.addClass('before');
//the following gives each image a 'name' attribute based on the caption, collapsed.
jQuery('img').each(function() {
    var f = jQuery(this).parents('dl.gallery-item').find('dd').text();
    var f = f.replace(/\s/g,'');
    jQuery(this).attr('name', f);
});
//the following takes each 'name' attribute, finds the before, and sticks it behind the after
    jQuery('img.before').each(function(){
        var imgName = jQuery(this).attr('name');
        var imgAfter = jQuery('img.after[name="' + imgName + '"]');

        var position = imgAfter.position();
//alert(position.top);
        imgAfter.after(this);
      //there was some CSS in the stylesheet, too, providing relative/absolute, etc.
        var css_array = {
            'top' : position.top,
            'left' : position.left,
            'display' : 'block',
        }

        jQuery(this).css(css_array);
    });
// then this fades the front image to the back image.
    jQuery('dl.after').hover(function(){
        jQuery(this).find('img.after').fadeOut(1500);
    }, function(){
        jQuery(this).find('img.after').fadeIn(1000);

皆さん、ありがとうございました！

于 2010-12-31T04:29:32.690 に答える