Question

我想制作一个悬停功能，在悬停时取消绑定以前的绑定功能。

但我不认为我理解jquery网站试图解释的内容。

请参阅我jsfiddle的尝试。 http://jsfiddle.net/motocomdigital/S9uVh/

这是我的绑定功能，运行良好......

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

但是当我的元素悬停时，我正在尝试.unbind（）它，但是在我的第二次悬停交替中重新绑定它...

$('#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 );

    }
);

请有人帮我解决这个问题。还有一种方法是不必重写整个＆＃34; h1.trunc＆＃34;在我的悬停功能中再次运行。

请参阅工作jsfiddle here。提前谢谢。

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

Answer 1

嗯，你似乎误解了一些事情。首先，.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 );
    }
);

结帐this jsFiddle。但请注意，此.shorten插件似乎设置了nowrap css，这使它看起来很糟糕。您可以更改所有必需的样式，但编写自己的.shorten函数可能更容易。：

Answer 2

如果你看一下shorten实际上在做什么，它就会删除文本而且这种方法没有相反的方法，例如unshorten。

如果我理解正确，您希望在悬停时显示文本，然后在悬停时再次将其截断。

我会摆脱shorten插件，只使用css。看看这个小小提琴：http://jsfiddle.net/S9uVh/22/

基本上我只是删除一个类，然后再添加它。使用;

缩短<h1>标记

text-overflow: ellipsis;
overflow: hidden;    
white-space: nowrap;

Answer 3

工作演示： http://jsfiddle.net/S9uVh/30/

我已存储每个标题的原始文本，并且还存储了每个标题的缩短文本。在#element悬停时，最近的h1文本将替换为原始文本。在悬停时，其文本将重新设置为缩短版本。

Answer 4

你做错了什么。

用法是

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

和

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

也弃用* bind（），你应该使用 on（）和 off（）

悬停函数中的.unbind（）和.bind（）函数

4 个答案: