0

我正在尝试制作一个悬停功能，它在悬停时会取消绑定先前绑定的功能。

但我认为我不明白 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 );

    }
);​

有人可以帮我解决这个问题吗？还有一种方法不必在我的悬停函数中重新编写整个“h1.trunc”函数。

请在此处查看工作 jsfiddle。提前致谢。

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

4

4 回答 4

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 回答
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 回答
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 回答