Fatal编程技术网
  • javascript/
  • Javascript 如何加上「；阅读更多“；与jquery中的许多段落链接？

Javascript 如何加上「；阅读更多“；与jquery中的许多段落链接？

javascript jquery html

Javascript 如何加上「；阅读更多“；与jquery中的许多段落链接？,javascript,jquery,html,Javascript,Jquery,Html,我有一个包含许多段落的contentDIV。 这是它的"标记"的样子, <div class="more"> <p>Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its

我有一个包含许多段落的content
DIV
。 这是它的"标记"的样子,

<div class="more">
    <p>Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. </p>
    <p>That an extinct one-tonne relative of the ncisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. </p>
    <p>Extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. </p>
</div>


根据对其头骨的研究，科学家说，一只灭绝的一吨级豚鼠的亲戚可能使用了它30厘米长的门牙。根据对其头骨的研究，科学家说，一只灭绝的一吨级豚鼠的亲戚可能使用了它30厘米长的门牙

那是一种灭绝的一吨重的象牙。根据对其头骨的研究，科学家说，一只灭绝的一吨级豚鼠的亲戚可能使用了它30厘米长的门牙

已经灭绝的一吨级豚鼠亲属可能使用了30厘米长的门牙。根据对其头骨的研究，科学家说，一只灭绝的一吨级豚鼠的亲戚可能使用了它30厘米长的门牙
现在我需要添加一个链接，一旦字符达到300个，我就可以“阅读更多”。我还想将此链接显示为切换

我只是用jquery尝试了一下，但是我不能正确地理解它

这是我的jquery-

var showChar = 300;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar-1, content.length - showChar);

        var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
});

var showChar=300；
var ellipseText=“…”；
var moretext=“更多”；
var lesstext=“less”；
$（'.more'）。每个（函数（）{
var content=$（this.html（）；
如果（content.length>showChar）{
var c=content.substr（0，showChar）；
var h=content.substr（showChar-1，content.length-showChar）；
var html=c+''+ellipseText+''+h+''；
$（this）.html（html）；
}
});
$（“.morelink”）。单击（函数（）{
if（$（this）.hasClass（“更少”））{
$（此）.removeClass（“更少”）；
$（this.html（moretext）；
}否则{
$（此）.addClass（“更少”）；
$（this.html（lesstext）；
}
$（this.parent（）.prev（）.toggle（）；
$（this.prev（）.toggle（）；
返回false；
});
使用当前jquery

希望有人能帮助我。谢谢你。

这就是你能做到的

如果浏览器发现任何html标记中断，则其会自动包含在相关标记中：
可能在下面代码片段将帮助您：


$(document).ready(function(){ 


           var showChar = 300;
           var ellipsestext = "...";
           var moretext = "more";
           var lesstext = "less";
           var h = "";
           var content = $(".more").text();

           if(content.length > showChar) 
           {
                var c = content.substr(0, showChar);
                h = content.substr(showChar-1, content.length - showChar);

                var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

                $(".more").html(html);
                $('.morecontent').hide();
            }

        $(".morelink").click(function()
        {
            if($(this).hasClass("less")) 
            {
                $('.more').remove(h);
                $(this).removeClass("less");
                $(this).html(moretext);
            } 
            else 
            {
                $('.more').append(h);
                $(this).addClass("less");
                $(this).html(lesstext);
            }

            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });

});



$（文档）.ready（函数（）{
var-showChar=300；
var ellipseText=“…”；
var moretext=“更多”；
var lesstext=“less”；
var h=“”；
var content=$（“.more”）.text（）；
如果（content.length>showChar）
{
var c=content.substr（0，showChar）；
h=content.substr（showChar-1，content.length-showChar）；
var html=c+''+ellipseText+''；
$（“.more”）.html（html）；
$（'.morecontent'）.hide（）；
}
$（“.morelink”）。单击（函数（）
{
if（$（this）.hasClass（“更少”））
{
$（'.more'）。删除（h）；
$（此）.removeClass（“更少”）；
$（this.html（moretext）；
} 
其他的
{
$（'.more'）。追加（h）；
$（此）.addClass（“更少”）；
$（this.html（lesstext）；
}
$（this.parent（）.prev（）.toggle（）；
$（this.prev（）.toggle（）；
返回false；
});
});

类似的东西将有助于保持
并有300个字符的计数



var showChar=300；
var ellipseText=“…”；
var moretext=“更多”；
var lesstext=“less”；
$（'.more'）。每个（函数（）{
var content=$（this.html（）；
var textcontent=$（this.text（）；
如果（textcontent.length>showChar）{
var c=textcontent.substr（0，showChar）；
//var h=content.substr（showChar-1，content.length-showChar）；
var html=''+c+''+''+ellipseText+''+content+''；
$（this）.html（html）；
$（本）。在（''）之后；
}
});
$（“.morelink”）。单击（函数（）{
if（$（this）.hasClass（“更少”））{
$（此）.removeClass（“更少”）；
$（this.html（moretext）；
$（this.prev（）.children（'.morecontent'）.fadeToggle（500，function（））{
$（this.prev（）.fadeToggle（500）；
});
}否则{
$（此）.addClass（“更少”）；
$（this.html（lesstext）；
$（this.prev（）.children（'.container'）.fadeToggle（500，function（））{
$（this.next（）.fadeToggle（500）；
});
}
//$（this.prev（）.children（）.fadeToggle（）；
//$（this.parent（）.prev（）.prev（）.fadeToggle（500）；
//$（this）.parent（）.prev（）.delay（600）.fadeToggle（500）；
返回false；
});

.morecontent{
显示：无；
}



根据对其头骨的研究，科学家说，一只灭绝的一吨级豚鼠的亲戚可能使用了它30厘米长的门牙。根据对其头骨的研究，科学家说，一个灭绝的一吨级吉尼斯30厘米门牙的亲属
像象牙一样

那是一种灭绝的一吨重的象牙。根据对其头骨的研究，科学家们说，一只灭绝的一吨级珍珠贝门牙像象牙

已经灭绝的一吨级豚鼠亲属可能使用了30厘米长的门牙。根据对其头骨的研究，科学家说，一只灭绝的一吨级豚鼠的亲戚可能使用了它30厘米长的门牙


你可以检查一下@TNK reading content Length不是一个好的解决方案，如果你想保留HTML标记，那么height是否适用于你的解决方案，就像这个插件一样？你在JSFIDLE中测试过这个脚本吗？@jogesh_-pi：在我的本地机器上测试过。创建一个提琴并测试它，或者编辑用户的提琴，你的代码似乎中断了。非常感谢你的回答。但有两件事我需要知道，有没有办法用这个添加
fadeIn（）
和
fadeOut（）
？以及如何从我的内容分区外部显示
。。再次感谢。如果我用
find（）
和
试过，我是如何更改此代码的

$(document).ready(function(){ 


           var showChar = 300;
           var ellipsestext = "...";
           var moretext = "more";
           var lesstext = "less";
           var h = "";
           var content = $(".more").text();

           if(content.length > showChar) 
           {
                var c = content.substr(0, showChar);
                h = content.substr(showChar-1, content.length - showChar);

                var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

                $(".more").html(html);
                $('.morecontent').hide();
            }

        $(".morelink").click(function()
        {
            if($(this).hasClass("less")) 
            {
                $('.more').remove(h);
                $(this).removeClass("less");
                $(this).html(moretext);
            } 
            else 
            {
                $('.more').append(h);
                $(this).addClass("less");
                $(this).html(lesstext);
            }

            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });

});