Javascript 切换。使用jQuery切掉文本

我想切换

.slice

切掉前100个字符后隐藏的文本

我有以下代码：

.html

  <div class="col-sm-12">
    <p class="pdp-product-description">This has more than 100 characters and it is showing that it is sliced after the 100th</p>
    <a href="#"><span class="view-details">View Details</span></a>
  </div>

这有100多个字符，显示在第100个字符之后被切片

.js

$(function() {
    var hiddenDescription = $('p.pdp-product-description');

    hiddenDescription.each(function(){
        var t = $(this).text();
        if(t.length < 100) return;
        $(this).html(
            t.slice(0,100)+'<span>... </span>'+
            '<span class="hidden">'+ t.slice(100,t.length)+'</span>'
        );
    });

    $('.view-details').click(function() {
      $('.pdp-product-description').toggleClass('.hidden');
    });
});

$（函数（）{
var hiddenscription=$（'p.pdp-product-description'）；
hiddenDescription.each（函数（）{
var t=$（this.text（）；
如果（t.长度<100）返回；
$（this.html）(
t、 切片（0100）+'…'+
''+t.切片（100，t.长度）+''
);
});
$（'.view details'）。单击（函数（）{
$（'.pdp产品说明'）.toggleClass（'.hidden'）；
});
});

当前设置似乎不起作用，有什么想法吗？

两个问题：

类位于跨距上，而不是段落上，但您要在段落上切换它

调用

toggleClass

时，不包括

。点用于在CSS中引入类选择器，它不是类名称的一部分

因此：

现场示例：

$（函数（）{
var hiddenscription=$（'p.pdp-product-description'）；
hiddenDescription.each（函数（）{
var t=$（this.text（）；
如果（t.长度<100）返回；
$（this.html）(
t、 切片（0，100）+“…”+
''+t.切片（100，t.长度）+''
);
});
$（'.view details'）。单击（函数（）{
$（'.pdp产品说明span'）.toggleClass（'hidden'）；
});
});
。隐藏{
显示：无；
}

它有100多个字符，显示在第100个字符之后被切片-它有100多个字符，显示在第100个字符之后被切片

$('.pdp-product-description span').toggleClass('hidden');
// ------------------------^^^^^----------------^