1

私は画像を並べてレンダリングするアプリケーションに取り組んでいます。画像にカーソルを合わせると、画像の情報を示す非表示のクラスが表示されます。

また、デフォルトの並べ替え（日付）の代わりにポイント（最初に高い、降順）で画像を並べ替えることができるように、並べ替え機能もあります。ホバリングと並べ替えの両方が、1つのことを除いて正常に機能します。

画像をポイントで並べ替えて再度レンダリングすると、画像にカーソルを合わせても機能しません。生成されたコードを確認しましたが、同じように見えますが、機能しません。

私はここで助けてくれて本当にありがたいです、ありがとう！

<div id="images">
    <div class="image">
        <div class="post">
            // other code here
            <div class="postDesc">
                // other code here
                <p class="postDescContent">Points: 10</p>
            </div
        </div>
    </div>
    <div class="image">
        <div class="post">
            // other code here
            <div class="postDesc">
                // other code here
                <p class="postDescContent">Points: 20</p>
            </div
        </div>
    </div>
    // and so one...
</div>

ソート機能：

sortByPoints: function() {
    var contents = $('div#images div[class^="image"]');

    contents.sort(function(a, b) {

        var p1= parseInt($('p.postDescContent', $(a)).text().replace('Points:','').trim()),
            p2 = parseInt($('p.postDescContent', $(b)).text().replace('Points:','').trim());
           return p1 < p2;

    });

    var images = $('#images');

    images.empty();
    images.append(contents);
}

ホバー機能：

$('.image').hover(function () {
    $(this).find('.postDesc').toggle();
});
4

3 に答える 3

3

この.empty()メソッドは、すべての要素データをクリアします。空にする必要はまったくありません。するだけです.append()。

var images = $('#images');

//images.empty();  // remove this

images.append(contents);

これは、ハンドラーデータを失うことなく、並べ替えられた要素を表示するのに十分なはずです。

ライブデモ： http： //jsfiddle.net/mgF3L/

于 2012-05-08T12:30:08.327 に答える
2

使用する.on()

$('#images').on('hover', 'div.image', function() {
    $(this).find('.postDesc').css('color','#000');
});

bindを使用できない理由は、スクリプトを動的に追加するためです。したがって、バインディングは削除されます。

.on().live()jquery1.7で非推奨になったの代わりになります

編集 私の間違いを指摘してくれた@cliveに感謝します。これが更新されたフィドルです

于 2012-05-08T12:30:35.470 に答える
0

デリゲートイベントでこれを試してください：

$('#images').on('hover', '.image',function () {
    $(this).find('.postDesc').toggle();
});

デモ

于 2012-05-08T12:31:43.647 に答える