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

Trying to apply an event on single class Jquery or js

本文关键字：js 应用 事件 Jquery 单个类      更新时间：2023-09-26

我正在尝试创建自己的阅读更多/更少注释函数。阅读更多 无读图像。

在开发过程中，我遇到了一个问题。假设，我有 3 条评论（见第一张图片），超过 500 个字符。在这些评论中，所有/全文都没有显示，所以我添加了阅读更多链接来阅读所有评论。仅显示我单击的那个类。

问题：当我单击其中一个链接ReadMore时，它向我显示所有三个带有全文的评论，而不是仅向我显示单击的类文本。问题图像：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>

我的解决方案：

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();
        });
相关文章：