我下面的代码由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> <span class="morecontent"><span>' + h + '</span> <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>
答案 0 :(得分：2)
您的子字符串在<br上被切掉：
<br</span> <a href="" class="morelink" style="font-size:15px">Read More</a></span>
在这种情况下，您可以通过不切掉最后一个字符来保存，这还是有问题的-正如您在其他人身上看到的那样，最后一个句号丢失了
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> <span class="morecontent"><span>' + h + '</span> <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>