jquery點擊禁用功能

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 & output所有文字沒有切片。

如何禁用功能？

Answer 1

製作原件的副本並將其存儲在數據屬性中。循環並放回文本。

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 2

您需要保留原件的副本以便稍後恢復。例如：

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