如何在首次使用jQuery阅读更多链接后隐藏内容

我想在“阅读更多”链接后隐藏其余段落。现在，readmore链接被附加到'EACH'p元素。我对jQuery比较陌生，如果你能指出我做错了什么，这会很有帮助

jQuery

$('.BlockContent p').each(function() {
    var txt = $(this).text();
    var link = $('#NewsContent .p-name a').attr("href");

    if (txt.length>5) {
        $(this).html('<span>'+txt.substring(0,5)+'&nbsp;&nbsp;</span><a href="'+link+'"> Read More</a>');
    }
}); 

$（'.BlockContent p'）。每个（函数（）{
var txt=$（this.text（）；
var link=$（'#newcontent.p-name a'）.attr（“href”）；
如果（txt.length>5）{
$（this.html（''+txt.substring（0,5）+''）；
}
}); 

HTML

<div class="BlockContent" id="NewsContent">

  <p><img src="http://placehold.it/600x300"></p>

  <h1 class="p-name"><a href="testPost.html">Page Title</a></h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in odio mi. Fusce varius urna quis sem viverra id laoreet sem imperdiet. Morbi ultricies varius tortor, in congue ipsum facilisis ut. Suspendisse potenti. Nam ut eros quis orci eleifend rutrum vestibulum adipiscing nisl. Morbi mauris dui, iaculis consequat auctor in, auctor vel velit. Mauris lacinia adipiscing sapien, vel mollis massa pulvinar et. Curabitur eu urna venenatis nisi rhoncus eleifend.</p>

   <p>Nam dapibus lectus ac libero aliquet id malesuada tortor accumsan. Mauris lacus orci, euismod ac vehicula nec, scelerisque non tortor. Praesent quis odio a elit congue luctus. Aliquam ultricies, massa quis gravida tincidunt, justo mi scelerisque lectus, fringilla hendrerit tortor metus quis tellus. Suspendisse sit amet felis eu erat mollis rhoncus at non ligula. Fusce odio est, consectetur sed scelerisque quis, rhoncus ac lectus. Donec accumsan viverra eros, et vulputate augue laoreet et.</p>
   <p>Nam dapibus lectus ac libero aliquet id malesuada tortor accumsan. Mauris lacus orci, euismod ac vehicula nec, scelerisque non tortor. Praesent quis odio a elit congue luctus. Aliquam ultricies, massa quis gravida tincidunt, justo mi scelerisque lectus, fringilla hendrerit tortor metus quis tellus. Suspendisse sit amet felis eu erat mollis rhoncus at non ligula. Fusce odio est, consectetur sed scelerisque quis, rhoncus ac lectus. Donec accumsan viverra eros, et vulputate augue laoreet et.</p>
    <p>Nam dapibus lectus ac libero aliquet id malesuada tortor accumsan. Mauris lacus orci, euismod ac vehicula nec, scelerisque non tortor. Praesent quis odio a elit congue luctus. Aliquam ultricies, massa quis gravida tincidunt, justo mi scelerisque lectus, fringilla hendrerit tortor metus quis tellus. Suspendisse sit amet felis eu erat mollis rhoncus at non ligula. Fusce odio est, consectetur sed scelerisque quis, rhoncus ac lectus. Donec accumsan viverra eros, et vulputate augue laoreet et.</p>

   </div>

Lorem ipsum dolor sit amet，是一位杰出的献身者。奥迪奥米的阿利奎姆。福斯瓦里乌纳奎斯，维韦拉和拉奥里特。面部同侧多发性杂音。潜力悬钩子。不，我爱你，我爱你。Morbi mauris dui，iaculis consequat拍卖人，拍卖人vel velit。毛里斯·拉齐尼亚（Mauris lacinia）是一位智者，他是一位普尔文纳（pulvinar）和库拉比（Curabitur eu urna venenatis nis rhoncus eleifend）的创始人

南·达皮布斯·莱库斯·阿利奎特·马莱苏阿达·托尔托·阿库姆桑（malesuada tortor accumsan）。Mauris lacus orci，euismod ac vehicula nec，无侵权者权杖。这是一个精英群体。别有用心的阿利夸姆，怀孕的马萨，我的权杖，弗林蒂利亚·亨德雷特的玉米饼。悬钩子坐在非利古拉的埃米特猫科动物埃拉特·莫利斯·朗卡斯（mollis rhoncus）。这是一个很好的例子。多内克·维韦拉·厄洛斯和奥古斯·拉奥里特等

南·达皮布斯·莱库斯·阿利奎特·马莱苏阿达·托尔托·阿库姆桑（malesuada tortor accumsan）。Mauris lacus orci，euismod ac vehicula nec，无侵权者权杖。这是一个精英群体。别有用心的阿利夸姆，怀孕的马萨，我的权杖，弗林蒂利亚·亨德雷特的玉米饼。悬钩子坐在非利古拉的埃米特猫科动物埃拉特·莫利斯·朗卡斯（mollis rhoncus）。这是一个很好的例子。多内克·维韦拉·厄洛斯和奥古斯·拉奥里特等

南·达皮布斯·莱库斯·阿利奎特·马莱苏阿达·托尔托·阿库姆桑（malesuada tortor accumsan）。Mauris lacus orci，euismod ac vehicula nec，无侵权者权杖。这是一个精英群体。别有用心的阿利夸姆，怀孕的马萨，我的权杖，弗林蒂利亚·亨德雷特的玉米饼。悬钩子坐在非利古拉的埃米特猫科动物埃拉特·莫利斯·朗卡斯（mollis rhoncus）。这是一个很好的例子。多内克·维韦拉·厄洛斯和奥古斯·拉奥里特等

像这样的东西

$('.BlockContent h1 ~ p').hide().first().show().each(function () {
    var txt = $(this).text();
    var link = $('#NewsContent .p-name a').attr("href");

    if (txt.length > 5) {
        $(this).html('<span>' + txt.substring(0, 5) + '&nbsp;&nbsp;</span><a href="' + link + '"> Read More</a>');
    }
});

$（'.BlockContent h1~p'）.hide（）.first（）.show（）.each（函数）（）{
var txt=$（this.text（）；
var link=$（'#newcontent.p-name a'）.attr（“href”）；
如果（txt.length>5）{
$（this.html（''+txt.substring（0,5）+''）；
}
});

演示

---

---

它将隐藏

h1

标记后面的所有

p

元素，第一个元素除外。在第一个链接上，它将运行添加链接的代码。

因此，下面是使“阅读更多”链接正常工作的解决方案

$('.BlockContent p').each(function() {

    var _this = this;
    var txt = $(this).text();
    var link = $('#NewsContent .p-name a').attr("href");

    if (txt.length>5) {
        $(this).html('<span>'+txt.substring(0,5)+'&nbsp;&nbsp;</span><a href="'+link+'" class="show-more"> Read More</a>');
    }

    $(_this).find(".show-more").click(function (event) {

        $(_this).html(txt);

        event.preventDefault();

    });

}); 

$（'.BlockContent p'）。每个（函数（）{
var_this=这个；
var txt=$（this.text（）；
var link=$（'#newcontent.p-name a'）.attr（“href”）；
如果（txt.length>5）{
$（this.html（''+txt.substring（0,5）+''）；
}
$（_this）.find（“.show more”）。单击（函数（事件）{
$（_this.html（txt）；
event.preventDefault（）；
});
}); 

如果我正确理解了您的问题，您希望只显示第一篇文章片段，而隐藏其余部分

您只需对代码进行以下更改即可使其正常工作。我在each函数中添加了一个I参数，用作迭代器，并添加了额外的if-then语句来隐藏其他p标记

Javascript:JSFIDLE示例-

$（'.BlockContent p'）。每个（函数（i）{//添加i变量以计算迭代次数
var txt=$（this.text（）；
var link=$（'#newcontent.p-name a'）.attr（“href”）；
如果（txt.length>5）{
$（this.html（''+txt.substring（0,5）+''）；
}
//如果我大于一
//或者换句话说，你已经循环了
//超过第一个.BlockContent p标记
如果（i>1）{
//隐藏其他段落
$（this.hide（）；
}
}); 

所以小提琴看起来不错。你到底需要什么？到底是什么问题？

$（'p:gt（0）'）。hide（）插入read more标记后，我想隐藏其余段落的内容。现在，它在每个
p
tag@sajadkaruthedth@rahuldesaithis这类作品中添加了“阅读更多”，但它隐藏了阅读更多链接@Larrylane现在我贴的提琴并没有隐藏你第一段之后的阅读更多链接。你能解释一下你所说的阅读更多链接吗？
$('.BlockContent p').each(function(i) {//add the i variable to count iterations

    var txt = $(this).text();


    var link = $('#NewsContent .p-name a').attr("href");

    if (txt.length > 5) {


        $(this).html('<span>'+txt.substring(0,5)+'&nbsp;&nbsp;</span><a  href="'+link+'"> Read More</a>');

    }

    //if i is greater than one
    //or in other words you have looped
    //past the first .BlockContent p tag
    if(i > 1){

        //hide the other paragraphs
        $(this).hide();

    }
});