0

ここでjqueryコードの見栄えを良くしようとしています。私の関数は正しく機能していますが、誰かが私のコードを醜くしないようにできるかどうか疑問に思いました。どうもありがとう！

HTML 

<div class='image_layout'>
    <a href='#'><img src=' a.jpg '/></a> 
          <br><p class='credits'>hahahah 
          <br>Agency: Agency1
          <br>Picture ID: 5 </p> 
</div>

jQuery

$('#image_layout').on('hover', 'img', function() {
    $(this).parent().next().next().fadeIn('fast');
})
$('#image_layout').on('mouseout', 'img', function() {
    $(this).parent().next().next().fadeOut('fast');
})​
4

4 に答える 4

2

2 つの関数を jQuery hover に渡すことができます。1 つは mousein 用、もう 1 つは mouseout 用です。動的に追加された画像がない限り、この変更を行うことができます。フェードする要素に ID またはクラスがある場合、コードも非常に単純になります。

$('#image_layout img').hover(
    function () {
        $(this).closest('.someClass').fadeIn('fast');
    },
    function () {
        $(this).closest('.someClass').fadeOut('fast');
    }
);
于 2012-08-07T17:12:28.097 に答える
1

.eq2 つのステートメントとは対照的に使用しますnext。さらに、hover は 2 つの関数を使用しますmouseenter。mouseout

$('#image_layout').hover('hover', 'img', function () {
    $(this).parent().eq(2).fadeIn('fast');
}, function () {
    $(this).parent().eq(2).fadeOut('fast');
})

参考文献

于 2012-08-07T17:10:47.207 に答える
1 
$('.image_layout').on('hover', 'img', function (e) {
    if(e.type == 'mouseover') {
        $(this).closest('.image_layout').find('.credits').stop().fadeIn('fast');
    } else {
        $(this).closest('.image_layout').find('.credits').stop().fadeOut('fast');
    }
})

次のこともできます。

$('.image_layout').on('hover', 'img', function() {
    $(this).closest('.image_layout').find('.credits').stop().fadeIn('fast');
}, function() {
    $(this).closest('.image_layout').find('.credits').stop().fadeOut('fast');
});

画像をホバリングする以外に要素がフェードしないことが確実な場合は、単純に次のように記述できます。

$('.image_layout').on('hover', 'img', function() {
    $(this).closest('.image_layout').find('.credits').stop().fadeToggle('fast');
});
于 2012-08-07T17:10:54.183 に答える
1

Douglas Crockford の JS Style Guideを調べてください。彼はあなたのコードを（改善して）次のようにします：

var obj = $('#image_layout img');
obj.mouseover( function(){
  $(this).parent([selector]).next([selector]).fadeIn('fast');
});

obj.mouseout( function(){
    $(this).parent([selector]).next([selector]).fadeOut('fast');
});

は必要ありませんon。関数を直接呼び出すだけです。

于 2012-08-07T17:13:59.267 に答える