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

Question

我正在尝试创建自己的评论阅读 More/less 功能。 ReadMore ReadLess Image.

在开发过程中，我遇到了一个问题。假设，我有 3 条评论（see first Image）超过 500 个字符。在这些评论中 all/full 文本未显示，因此我添加了 ReadMore 链接以阅读所有评论。仅显示我点击的 class..

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

我的 jsBin : https://jsbin.com/waqoror/1/edit?html,js,console,output

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

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='#' onclick='ReadMoreLess()' 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='#' onclick='ReadMoreLess()' class='txb_rdL  _pedu'> " +
      readL +
      " </a>" +
      "</span>" +
      "</span>";
    txt = startupCont;
    txt += hiddenContent;
  }
  return txt;
}

function ReadMoreLess(){
            
            if($(".tetb_apndhd").css("display") == "none"){
                console.log("IF");
                $(".tetb_apndhd").css({"display":"inline-block"});
                $(".tetb_apndShw").css({"display":"none"});
            }else if(($(".tetb_apndhd").css("display") == "inline-block")){
                console.log("ELSE IF");
                $(".tetb_apndShw").css({"display":"inline-block"});
                $(".tetb_apndhd").css({"display":"none"});
            }
        }

$(".apndbtn").click(function (){
    var txt = mangeText($(".txt").val());
    $(".dclr").append(txt);
});

.txt{width:300px;height:150px;resize:none}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<textarea class="txt" id="tt">Etiam vitae faucibus urna. Cras in enim ac eros cursus euismod. Aenean tristique arcu eu quam pharetra rutrum. Proin tincidunt magna at nibh tristique, eu finibus ipsum ultricies. Nunc eget lorem ac diam dictum condimentum. Vestibulum eu nisi a lorem ornare finibus.</textarea><br/>
<button class="apndbtn">Append</button>
 <div class="dclr"></div>
</body>
</html>

Answer 1

我的解决方案：

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();
    }); 

});

我删除了链接上的 onClick 事件并将此代码添加到 .apndbtn 点击函数：

$( ".txb_rdM" ).bind( "click", function() {
          $(this).parents(".umoriRut").hide().next().show();
          return;
        }); 
      $( ".txb_rdL" ).bind( "click", function() {
          $(this).parents("._umori120Rut").hide().prev().show();
        });

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

Trying to apply an event on single class Jquery or js

html

javascript

jquery

jquery-events