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的“显示更多”“显示更少”代码问题

回答

相关问题