javascript - 阅读更多按钮不适用于 元素

Question

下面的代码由 HTML Tab 组成我打印了多个 DOM带有 Read More Button 的选项卡内的元素当它只是一个段落时该功能工作正常但是当我在段落内添加
标签时按钮不再出现有谁知道为什么会发生这种情况任何建议/帮助将不胜感激谢谢!

这个问题可以在 John Doe 的第一个描述中看到，其中有一些 <br>在文中

var personArr = [];
var person = {["first-Name"]:"John", ["last-Name"]:"Doe", ["age"]:21, ["person-desc"]:"<br />Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky <br />boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim <br />sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket.Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin<br /> picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong <br /> ham hock tenderloin shank brisket.<br />"};
var person2 = {["first-Name"]:"Paul", ["last-Name"]:"Logan", ["age"]:22, ["person-desc"]:"Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket.Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket."};
var person3 = {["first-Name"]:"Sean", ["last-Name"]:"Kim", ["age"]:32, ["person-desc"]:"Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket.Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket."};
var person4 = {["first-Name"]:"Ken", ["last-Name"]:"Chow", ["age"]:12, ["person-desc"]:"Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket.Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket."};

personArr.push(person, person2, person3, person4);

var parent = document.getElementsByClassName('line1')[0];
var frag = document.createDocumentFragment();

personArr.forEach((person,i) => {
   var name = document.createElement('h4');
   var desc = document.createElement('p');
   var button = document.createElement('div');

   desc.className = "more";
   name.innerHTML = ` ${person['first-Name']} ${person['last-Name']}`;
   desc.innerHTML = ` ${person['person-desc']}`;
   frag.appendChild(name);
   frag.appendChild(desc);

});
parent.appendChild(frag);
//<---------------------------------------------- READ MORE FUNCTION ------------------------------------------------------->
$(document).ready(function() {
	var showChar = 300;
	var ellipsestext = "...";
	var moretext = "Read More";
	var lesstext = "Read Less";
	$('.more').each(function() {
		var content = $(this).html();

		if(content.length > showChar) {
			var c = content.substr(0, showChar);
			var h = content.substr(showChar-1, content.length - showChar);
			var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink" style="font-size:15px">'+moretext+'</a></span>';
			$(this).html(html);
		}
	});
	$(".morelink").click(function(){
		if($(this).hasClass("less")) {
			$(this).removeClass("less");
			$(this).html(moretext);
		} else {
			$(this).addClass("less");
			$(this).html(lesstext);
		}
		$(this).parent().prev().toggle();
		$(this).prev().toggle();
		return false;
	});
});
//<---------------------------------------------- READ MORE FUNCTION ------------------------------------------------------->


//<---------------------------------------------- TAB FUNCTION ------------------------------------------------------->
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
//<---------------------------------------------- TAB FUNCTION ------------------------------------------------------->

body {font-family: Arial;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.line1{
display:inline-block;
}
.size{
width:50%;
}
a.morelink {
	text-decoration:none;
	outline: none;
}
.morecontent span {
	display: none;

}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
<div class ="size">
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button>
</div>

<div id="People" class="tabcontent">
<div class="line1"> 

 </div>
 </div>
</div>


</body>
</html> 

Answer 1

您的子字符串在 <br 处被 chop :

<br</span>&nbsp;&nbsp;<a href="" class="morelink" style="font-size:15px">Read More</a></span>

在这种情况下，您可以通过不 chop 最后一个字符来保存，无论如何这是错误的 - 正如您在其他人身上看到的那样，缺少最后一个句号

var c = content.substr(0, showChar); // showChar is NOT included
var h = content.substr(showChar, content.length - showChar); // so include it here

但你真的需要检查斩波是否在 BR 上

我还将您的 DOM 翻译成 jQuery - 我可能在选项卡处理中破坏了一些东西 - 我添加了一个数据属性

var personArr = [];
var person = {
  ["first-Name"]: "John",
  ["last-Name"]: "Doe",
  ["age"]: 21,
  ["person-desc"]: "<br />Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky <br />boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim <br />sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket.Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin<br /> picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong <br /> ham hock tenderloin shank brisket.<br />"
};
var person2 = {
  ["first-Name"]: "Paul",
  ["last-Name"]: "Logan",
  ["age"]: 22,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket.Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket."
};
var person3 = {
  ["first-Name"]: "Sean",
  ["last-Name"]: "Kim",
  ["age"]: 32,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket.Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket."
};
var person4 = {
  ["first-Name"]: "Ken",
  ["last-Name"]: "Chow",
  ["age"]: 12,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket.Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket."
};

personArr.push(person, person2, person3, person4);

var $parent = $('.line1').eq(0);

personArr.forEach((person, i) => {
  var $name = $('<h4/>');
  var $desc = $('<p/>');
  var $button = ('<div/>');

  $desc.addClass("more");
  $name.html(` ${person['first-Name']} ${person['last-Name']}`);
  $desc.html(` ${person['person-desc']}`);
  $parent.append($name).append($desc);

});

//<---------------------------------------------- READ MORE FUNCTION ------------------------------------------------------->
$(document).ready(function() {
  var showChar = 300;
  var ellipsestext = "...";
  var moretext = "Read More";
  var lesstext = "Read Less";
  $('.more').each(function() {
    var content = $(this).html();

    if (content.length > showChar) {
      var c = content.substr(0, showChar);
      var h = content.substr(showChar, content.length - showChar);
      
      var lastH = h.lastIndexOf("<");
      if (lastH > h.length-3) {
        // process the tag in however way you need
      }
      
      var html = c + '<span class="moreelipses">' + ellipsestext + '</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink" style="font-size:15px">' + moretext + '</a></span>';
      console.log(c, html)

      $(this).html(html);
    }
  });
  $(".morelink").click(function() {
    if ($(this).hasClass("less")) {
      $(this).removeClass("less");
      $(this).html(moretext);
    } else {
      $(this).addClass("less");
      $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
  });
});
//<---------------------------------------------- READ MORE FUNCTION ------------------------------------------------------->


//<---------------------------------------------- TAB FUNCTION ------------------------------------------------------->
$(".tablinks").on("click",function() {
  var cityName = $(this).attr("data-id");
  $(".tabcontent").hide()
  $(".tablinks").removeClass("active");
  $("#"+cityName).show();
  $(this).addClass("active");
})
$("#defaultOpen").click(); 
//<---------------------------------------------- TAB FUNCTION ------------------------------------------------------->

body {
  font-family: Arial;
}


/* Style the tab */

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.line1 {
  display: inline-block;
}

.size {
  width: 50%;
}

a.morelink {
  text-decoration: none;
  outline: none;
}

.morecontent span {
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>
  <div class="size">
    <div class="tab">
      <button class="tablinks" id="defaultOpen" data-id="People">People</button>
    </div>

    <div id="People" class="tabcontent">
      <div class="line1">

      </div>
    </div>
  </div>


</body>

</html>