0

ホバー時に、以前のバインドされた関数のバインドを解除するホバー関数を作成しようとしています。

しかし、jquery Web サイトが説明しようとしていることを理解していないと思います。

このjsfiddleで私の試みを見てください。http://jsfiddle.net/motocomdigital/S9uVh/

これは正常に動作するバインドされた関数です...

$("h1.trunc").bind().shorten({
    width: 300,
    tail: '...',
    tooltip: false 
});

しかし、要素がホバーされたときに .unbind() しようとしていますが、2回目のホバー交替で再バインドします...

$('#element').hover(
    function () {

        $(this).find("h1.trunc").unbind();

        $(this).animate({
            height : '100px'    
        }, 200 );       

    }, 
    function () {

        $(this).find("h1.trunc").bind().shorten({
            width: 300,
            tail: '...',
            tooltip: false
        });

        $(this).animate({
            height : '20px'    
        }, 200 );

    }
);​

誰かがこれを修正するのを手伝ってくれませんか。また、ホバー関数内で「h1.trunc」関数全体を再度書き直す必要がない方法もあります。

ここでjsfiddleの動作を参照してください。前もって感謝します。

http://jsfiddle.net/motocomdigital/S9uVh/

4

4 に答える 4

2

実際に何をしているのかを見るとshorten、テキストが削除されており、この方法の逆はありませんunshorten。

私が正しく理解している場合は、ホバー時にテキストを表示し、ホバーオフ時にもう一度切り捨てます。

プラグインをshorten削除し、cssを使用します。この小さなフィドルをチェックしてください：http：//jsfiddle.net/S9uVh/22/

基本的には、クラスを削除してから、もう一度追加するだけです。タグは以下<h1>を使用して短絡されます。

text-overflow: ellipsis;
overflow: hidden;    
white-space: nowrap;
于 2012-07-09T15:01:55.623 に答える
2

さて、あなたはいくつかのことを誤解しているようです。まず第一に、その.bind()ままにしておく (つまり、引数なしで) とは何もしません。第二に、この.shortenプラグインは内部の HTML を変更しているように見えますが、何もありませんbinding。また、以前の状態に戻ることはできません。だから私はあなたがこれを行うべきだとアドバイスします：

HTML

<h1 class="trunc" data-text="This is a truncated title to untruncate when hovered using unbind tricks"></h1>

data-textすべてのテキストを属性に入れていることに注意してください。ハンドラー内で次のようにします。

JavaScript

var text = $("h1.trunc").attr("data-text");

$('#element').hover(
    function () {

        $(this).find("h1.trunc").text(text);

        $(this).animate({
            height : '100px'    
        }, 200 );       

    }, 
    function () {

        $(this).find("h1.trunc").text(text).shorten({
            width: 300,
            tail: '...',
            tooltip: false
        });

        $(this).animate({
            height : '20px'    
        }, 200 );
    }
);​

この jsFiddleをチェックしてください。ただし、この.shortenプラグインはnowrapcss を設定しているように見えるため、見栄えが悪くなります。必要なすべてのスタイルを変更できますが、独自の.shorten関数を作成する方が簡単な場合があります。:]

于 2012-07-09T15:00:40.523 に答える
1

実際のデモ: http://jsfiddle.net/S9uVh/30/

各タイトルの原文を保存し、各タイトルの短縮テキストも保存しました。最も近い h1 のテキストにカーソルを#element合わせると、元のテキストに置き換えられます。マウスを離すと、そのテキストは短縮版に戻ります。

于 2012-07-09T15:10:39.910 に答える
0

あなたは何かをしている/間違っている.

使い方は

.bind( eventType [, eventData], handler(eventObject) )

と

.unbind( [eventType] [, handler(eventObject)] )

また * bind ()は非推奨であり、 on()とoff( )を使用する必要があります

于 2012-07-09T15:00:49.753 に答える