jquery click disable the function

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>');
    });
}

I have a text use a function slice the content.

There is a button when user click, i want to disable function only for $this .content & output all text without slice.

How to disable function?

No where do you keep a copy of the orginal, so how would you be able to undo it? Modern day CSS has text-overflow: ellipsis — epascarello
– epascarello, Commented Feb 7, 2014 at 6:52
But you do need to keep a copy of the original to be able to restore it at a later point. — techfoobar
– techfoobar, Commented Feb 7, 2014 at 6:54

epascarello · Accepted Answer · 2014-02-07 07:10:31Z

1

Make a copy of the orginal and store it in a data attribute. Loop through and put the text back.

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);
    });
});

edited Feb 7, 2014 at 7:10

answered Feb 7, 2014 at 6:58

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2178521 Over a year ago

is that possible use span $(this) and only open the text, since i have may text have same class and share this function

epascarello Over a year ago

I showed you how to call it with the click of the span. Ideally it would be an anchor.

jingyinggong · Accepted Answer · 2014-02-07 07:22:46Z

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

techfoobar · Accepted Answer · 2014-02-07 08:27:12Z

1

You need to keep a copy of the original to be able to restore it later. For example:

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'));
    });
});

edited Feb 7, 2014 at 8:27

answered Feb 7, 2014 at 6:58

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Collectives™ on Stack Overflow

jquery click disable the function

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related