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

时间:2016-03-12 13:11:58

标签: javascript jquery html javascript-events

我正在尝试创建自己的读取更多/更少功能以进行评论。 ReadMore ReadLess Image

在开发过程中,我遇到了一个问题。 假设,我有3条评论(参见第一张图片)超过500个字符。在这些评论中未显示全文/全文,因此我添加 ReadMore 链接以阅读所有评论。仅显示我点击的那个类..

问题:当我点击其中一个链接 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>

1 个答案:

答案 0 :(得分:0)

我的解决方案:

//i[@class="fa fa-lg fa-check-circle green"]/preceding-sibling::a[@ng-click="acceptNotification(friendInvite, 'friend')"]

我删除了链接上的onClick事件,并将此代码添加到.apndbtn点击功能:

p = Pipeline([
    ("vectorizer", CountVectorizer()),
    ("selector", SelectPercentile(percentile=20)),
    ("nb", MultinomialNB())
])

p.fit(X, y)
joblib.dump(p, 'skclassif.pkl', compress = 1)
print(p.predict(["I hate this car"]))