Javascript 尝试在单个类Jquery或js上应用事件

我正在尝试为评论创建自己的多读/少读功能。

在开发过程中，我遇到了一个问题。 假设我有3条注释（参见第一幅图像），超过500个字符。在这些评论中，没有显示全部/全文，因此我添加了ReadMore链接来阅读所有评论。仅显示我单击的类

问题：当我点击其中一个ReadMore链接时，它会以全文显示所有三条注释，而不是只显示单击的类文本。 问题图片：img.ctrlv.in/img/16/03/12/56e4110ccb82d.png

我的jsBin：

现在也在这里粘贴我的代码片段

函数管理文本（text）{
var minCharLength=50；
var readL=“少读”；
var readM=“阅读更多”；
var txt=文本，
txtLength=0，
totLength=“”；
var startDisplayText=“”，
startupCont=“”，
hiddenContent=“”；
txtLength=txt.length；
对于（变量i=0；i=（minCharLength+50））{
startupCont+=“”+totLength+
" " +
"" +
"" +
"";
hiddenContent=”“+txt+
" " +
"" +
"" +
"";
txt=启动控制；
txt+=隐藏内容；
}
返回txt；
}
函数ReadMoreLess（）{
如果（$（“.tetb_apndhd”）.css（“显示”）=“无”）{
控制台日志（“如果”）；
$（.tetb_apndhd”）.css（{“display”：“inline block”}）；
$（.tetb_apndShw”）.css（{“display”：“none”}）；
}else if（$（“.tetb_apndhd”）.css（“显示”）==“内联块”））{
控制台日志（“其他如果”）；
$（.tetb_apndShw”）.css（{“display”：“inline block”}）；
$（.tetb_apndhd”）.css（{“display”：“none”}）；
}
}
$（“.apndbtn”）。单击（函数（）{
var txt=mangeText（$（“.txt”）.val（）；
$（“.dclr”）.append（txt）；
});
.txt{宽度：300px；高度：150px；大小：无}

JS-Bin
埃蒂亚姆·维塔·福西布斯·乌尔纳。埃尼姆·艾洛斯·库苏斯·尤伊斯莫的作品。埃尼安·特里斯蒂克·阿库·欧和法雷特拉·鲁特鲁姆。在尼布·特里斯蒂克的《麦格纳》杂志上发表了一篇文章。Nunc eget lorem ac DIAMDICUM调味品。前庭
追加
我的解决方案：

function mangeText(text) {
  var minCharLength = 50;
  var readL ="Read Less";
  var readM = "Read More";
  var txt = text,
    txtLength = 0,
    totLength = "";
  var startDisplayText = "",
    startupCont = "",
    hiddenContent = "";
  txtLength = txt.length;
  for (var i = 0; i < minCharLength; i++) {
    totLength += txt[i]; 
    //console.log("["+i+"] "+totLength);
  }
  if (txt.length >= (minCharLength + 50)) {
    startupCont += "<span class='yughi501 _po2075 tetb_apndShw umoriRut' style='display:inline-block'> " + totLength +
      " <span>" +
      "<a href='#' class='txb_rdM _d1e301 _oijd51 _pedu' style='display:inline-block'> " +
      readM +
      "</a>" +
      "</span>" +
      "</span>";



    hiddenContent = "<span class='yughi411 _po21075 _umori120Rut tetb_apndhd' style='display:none'> " + txt +
      " <span>" +
      "<a href='#' class='txb_rdL  _pedu'> " +
      readL +
      " </a>" +
      "</span>" +
      "</span>";
    txt = startupCont;
    txt += hiddenContent;


  }
  return txt;
}

function ReadMoreLess(event){
  //alert(event.target);

}


$(".apndbtn").click(function (){
    var txt = mangeText($(".txt").val());
    $(".dclr").append(txt);
      $( ".txb_rdM" ).bind( "click", function() {
      $(this).parents(".umoriRut").hide().next().show();
      return;
    }); 
  $( ".txb_rdL" ).bind( "click", function() {
      $(this).parents("._umori120Rut").hide().prev().show();
    }); 

});

您好，这是白痴，请查看并在您的问题中包含代码。您为什么使用
return
<代码>$（this）.parents（“.umoriRut”）.hide（）.next（）.show（）；返回--这样就不会触发事件的默认操作。
$( ".txb_rdM" ).bind( "click", function() {
          $(this).parents(".umoriRut").hide().next().show();
          return;
        }); 
      $( ".txb_rdL" ).bind( "click", function() {
          $(this).parents("._umori120Rut").hide().prev().show();
        });