jQuery的「顯示更多」「顯示更少」代碼問題

我使用下面的jQuery代碼，顯示/隱藏多餘的文字在我的網頁jQuery的「顯示更多」「顯示更少」代碼問題

jQuery.fn.shorten = function(settings) { 
    var config = { 
    showChars : 100, 
    ellipsesText : "...", 
    moreText : "more", 
    lessText : "less" 
    }; 

    if (settings) { 
    $.extend(config, settings); 
    } 

    $('.morelink').live('click', function() { 
    var $this = $(this); 
    if ($this.hasClass('less')) { 
     $this.removeClass('less'); 
     $this.html(config.moreText); 
    } else { 
     $this.addClass('less'); 
     $this.html(config.lessText); 
    } 
    $this.parent().prev().toggle(); 
    $this.prev().toggle(); 
    return false; 
    }); 

    return this.each(function() { 
    var $this = $(this); 

    var content = $this.html(); 
    if (content.length > config.showChars) { 
     var c = content.substr(0, config.showChars); 
     var h = content.substr(config.showChars , content.length - config.showChars); 
     var html = c + '<span class="moreellipses">' + config.ellipsesText + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="javascript://nop/" class="morelink">' + config.moreText + '</a></span>'; 
     $this.html(html); 
     $(".morecontent span").hide(); 
    } 
    }); 
};

我想上應用它下面的html上：

<div id="idcncinfobox" class="cncinfobox">    
     <div class="basic_cnc_info_layout"> 
      <span class="cncDesc more">asdjlkaj lakjd alkjs dajskldj uiojlksjdf kljsdf jirj klcj sdklfj skldjf rijfkls dj fjsdklfjr iej kldjf sh fbasnmb fa slkjdf dfjkjri wsll l ljdklfjkljsd jskldfj jsdklfj jskldjf jklsdjfklsdj irjklsjdfir lskdjfir jklsjdfkl jsir jklsjdklfjrijklsjdklf</span> 
      <dl>       
       <dt>Aliases</dt><dt1>:</dt1><dd itemprop="actor" class="cncAliases more">fasdfsdfssdlkfjskldjf klsjlkdfjklsdj jsdklfj sjdkljf sjkldfdjkl ksdjl; fsdj f;sdkljf sdkl;fj sdkjkfjsdkljfklj jsdkl;fjklsdjfkljdkjfkljdklsjfkldjsklf</dd> 
      </dl>       
     </div> 
    </div>

我使用下面的js代碼調用jQuery函數：

$(document).ready(function() { 
     $(".cncDesc").shorten({ 
      "showChars" : 50, 
      "moreText" : "See More", 
      "lessText" : "Less" 
     }); 
     $(".cncAliases").shorten({ 
      "showChars" : 20, 
      "moreText" : "See More", 
      "lessText" : "Less" 
     }); 
    });

正如你看到這裏我想獲得兩個元素上顯示/隱藏效果s在同一頁上。由於某種原因，它不起作用。如果我只在一個元素上應用它，它可以正常工作。我試着調試它，發現當我將它應用到兩個元素上時，它會兩次進入「單擊」功能，並最終取消該效果。

我已經在這裏創造http://jsfiddle.net/RzB7E/4/

小提琴任何幫助將不勝感激。

謝謝。

來源

2012-12-21 Vikalp Jain

我想你可以改變這一行

$('.morelink').live('click', function() {

到

$(this).find('.morelink').live('click', function() {

，你可以在這裏看到：http://jsfiddle.net/RzB7E/7/

當你通過類綁定到一個點擊事件，你綁定也全部點擊爲所有該類的元素。上面的更改指定要應用點擊的具體.morelink。

來源

2012-12-21 06:17:07 sberry

謝謝！ –

上面的代碼還有一個問題。它適用於文本，但是當我將其應用於包含一些html的div（例如錨定標記）時，它不起作用。我能做些什麼來使它能夠處理HTML內容？ –

同意@Sberry答案，但只是作爲一個suggetion，使用此

$(this).find('.morelink').on('click', function() {

由於從jQuery的v.1.7 +起，.live()方法顯然是過時了。 Details here

來源

2012-12-21 06:22:13

移動到'.on'時+1。 – sberry

謝謝！會做。 –

jQuery的「顯示更多」「顯示更少」代碼問題

回答

相關問題