Question

$('document').ready(function(){
    //textoverflow($('.content'),100);

    $('span').click(function(){
        //disable textoverflow function & output full text
    });
});

function textoverflow(ele, num){
    ele.each(function() {
        $(this).text(
            $(this).text().slice(0,num) + '...'
        ).append('<span>More</span>');
    });
}

我有一个文本使用函数切片内容。

用户点击时有一个按钮，我想仅为$this .content＆amp; output所有没有切片的文字。

如何停用功能？

Answer 1

您需要保留原件的副本才能稍后恢复。例如：

function truncate(ele, num){
    ele.each(function() {
        var self = $(this); // cache this, since we are using it in 3 places
        // keep a copy of the original text, before truncating
        self.data('original', self.text()).text(
            self.text().slice(0,num) + '...'
        ).append('<span>More</span>');
    });
}

function showFull(ele){
    ele.each(function() {
        var self = $(this);
        // restore orignial and remove the More link
        self.text(self.data('original').find('span').remove();
    });
}

$('document').ready(function(){
    truncate($('.content'),100);

    $('span').click(function(){
        showFull($(this).closest('.content'));
    });
});

Answer 2

制作原件的副本并将其存储在数据属性中。循环并将文本放回去。

function textoverflow(ele, num){
    ele.each(function() {
        var item = $(this);
        var orgText = item.text();
        if (orgText.length>num) {
            item.data("orgtext", orgText);
            item.text( item.text().slice(0,num) + '...');
            item.append('<span>More</span>');
        }
    });
}

function undoTextoverflow(ele){
    ele.each(function() {
        var item = $(this);
        var orgText = item.data("orgtext");
        if (orgText) {
            item.text(orgText);
        }
    });
}


$(function(){
    textoverflow($('.content'),100);

    $('.content').on("click", "span", function(){
        var parentElem = $(this).closest(".content");
        undoTextoverflow(parentElem);
    });
});

Answer 3

$('document').ready(function(){

    function bindTriggerOn($ele, num, yourEvent) {
        var dot = '...', more = '<span>More</span>';
        $ele.on(yourEvent,
            $ele.each(function() {
                var $me = $(this);
                $me.text($me.text().slice(0, num) + dot).append(more);
            });
        });
        $ele.trigger(yourEvent);
    };
    function offOn($ele, yourEvent) {
        $ele.off(yourEvent)
    };
    function textoverflow($ele, num, bl){
        var myEvent = "myEvent";
        if(bl) {
            bindTriggerOn($ele, num, myEvent);
        } else {
            offOn($ele, myEvent);
        }
    };
    var $content = $('.content');
    textoverflow($content, 100);

    $('span').click(function(){
        textoverflow($content, 0, false);
    });
});

jquery单击禁用该功能

3 个答案: