我在这里做错了什么？我将每个人放到了一个单独的ID中，但是我的代码仍然无法正常工作。请帮助完成几天的作业！
function readMoreRome() { //finds function
var dots = document.getElementById("dots"); //returns element that has the ID attribute with value, searches for dots
var moreText = document.getElementById("more"); // '' '' searches for more
var btnText = document.getElementById("myBtn"); // '' '' searches for myBtn
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more"; //button says read more to show more text
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less"; //button says read less to show less text
moreText.style.display = "inline";
}
}
function readMoreBuda() { //finds function
var dots = document.getElementById("dots2"); //returns element that has the ID attribute with value
var moreText = document.getElementById("more2"); // '' '' searches for more2
var btnText = document.getElementById("myBtn2"); // '' '' searches for myBtn2
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more"; //button says read more to show more text
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less"; //button says read less to show less text
moreText.style.display = "inline";
}
}<div class="card">
<h2>Visit Budapest</h2>
<div class="info"> <span class="date"><i class="far fa-calendar"></i> November 12, 2019</span> <span class="comment"><i class="far fa-comment-alt"></i> 2 comments</span> </div>
<div class="img"><img src="img/szechenyi.jpg" style="height:200px;"> </div>
<p><i>Széchenyi Thermal Baths </i></p>
<p>
Budapest is the capital city of Hungary. It is best known for its arts and culture. It is a relatively small city, however there are much to see and do.
<span id="dots2">...</span>
<span id="more2">Situated on thermal springs, there are many naturally heated baths to relax in, the Széchenyi baths are the largest with 15 indoor baths and 3 outdoor. There are many spectacular viewpoints in Budapest, great for capturing the views of the city. From 360 panoramic views up at St Stephens Basilica to a wide view of the parliament and the River at Fisherman’s Bastion. Visit the Museum of Fine Arts and enjoy a day amongst famous European art. Classical music lovers will appreciate a performance at the Academy of Music.</span>
</p>
<button onclick="readMoreBuda()" id="myBtn2">Read more</button>
</div>
<br>
<div class="card">
<h2>Visit Barcelona</h2>
<div class="info"> <span class="date"><i class="far fa-calendar"></i> December 06, 2019</span> <span class="comment"><i class="far fa-comment-alt"></i> 5 comments</span> </div>
<div class="img"><img src="img/guell-park.jpg" style="height:200px;"></div>
<p><i>Park Güell </i></p>
<p>
Barcelona, framed for its individuality, cultural interest, and physical beauty, home to art and architecture. Facing the Mediterranean to the southeast,
<span id="dots3">...</span>
<span id="more3"> the city is one of a kind. Upon visiting make sure you visit the spectacular and unique Park Güell which was firstly designed for a town up in the mountains by artist Antoni Gaudí. Gaudí's work is admired by architects around the World as being one of the most unique and distinctive styles in modern architecture. Other places worth visiting is the La Sagrada Família, is a giant basilica. With beaches on your doorstop, and art and city culture, this diverse city has everything to offer.</span>
</p>
<button onclick="readMoreBarca()" id="myBtn3">Read more</button>
</div>
它第一次起作用，但是按钮第二次不起作用？我更改了ID，但仍然无法使用。它可以工作，但是它会首先显示所有文本，然后显示更多内容，您必须多次单击才能重新连接并工作。
答案 0 :(得分：0)
这是解决问题的另一种方法。 有3种显示方式（initText（），initWords（）和initLines（）。 选择您要使用的任何一个，然后删除其他（根据需要）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Ellipse </title>
<style>
.j { width: 30em; text-align: justify; }
.hide { display: none; }
.pink { background-color: tan; color: white; }
b, span { cursor: pointer; }
</style>
</head>
<body>
<p class="j">Lorem ipsum dolor sit amet, consectetur adipisci elit,
sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
<b class="pink" onclick="evtEllipse(this)">…</b>
<span class="hide" onclick="spanEllipse(this)">
Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</p>
<p class="j">Lorem ipsum dolor sit amet, consectetur adipisci elit,
sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
<b class="pink" onclick="evtEllipse(this)">…</b>
<span class="hide" onclick="spanEllipse(this)">
Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</p>
<!-- Code below for same effect with random words/lines generated -->
<p class="j"><span class="gibber"></span> <!-- random english words or sentences -->
<b class="pink" onclick="evtEllipse(this)">…</b>
<span class="hide gibber" onclick="spanEllipse(this)"></span>
</p>
<p class="j"><span class="gibber"></span>
<b class="pink" onclick="evtEllipse(this)">…</b>
<span class="hide gibber" onclick="spanEllipse(this)"></span>
</p>
<p class="j"><span class="gibber"></span>
<b class="pink" onclick="evtEllipse(this)">…</b>
<span class="hide gibber" onclick="spanEllipse(this)"></span>
</p>
<p class="j"><span class="gibber"></span>
<b class="pink" onclick="evtEllipse(this)">…</b>
<span class="hide gibber" onclick="spanEllipse(this)"></span>
</p>
<p class="j" style="background:wheat"><span class="gibber"></span>
<b class="pink" onclick="evtEllipse(this)">…</b>
<span class="hide gibber" onclick="spanEllipse(this)"></span>
</p>
<script>
// For: http://www.webdeveloper.com/forum/showthread.php?364215-Show- only-first-line-of-a-paragraph&p=1508263#post1508263
function evtEllipse(info) {
info.nextElementSibling.classList.toggle('hide');
info.classList.toggle('hide');
}
function spanEllipse(info) {
info.classList.toggle('hide');
info.previousElementSibling.classList.toggle('hide')
}
</script>
<script>
var gibberish =
`Now is the time for all good men to come to the aid of their country.
Whatever the mind of man can conceive and believe, he can achieve.
The quick red fox jumps over the lazy brown dog.
Do it now for now is the only time you have.
All looks yellow to a jaundice eye.
Always drink upstream from the herd.
Don't squat with your spurs on.
You can always learn a new way of being stupid.
Look for new friends everywhere.
Be alert. The world needs more lerts!
Mistakes do not last a lifetime. Forgive often.`;
var lorumIpsum =
`Lorem ipsum dolor sit amet, consectetur adipisci elit,
sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.
Quis aute iure reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
function filltext(count, info=gibberish) {
var str = '', gibber = info.replace(/\s+/g,' ').split(' ');
for (var i=0; i<count; i++) str += gibber[Math.floor(Math.random()*gibber.length)]+" ";
return str;
}
function fillWords(count, info=gibberish) {
var str = '', gibber = info.split(' ');
for (var i=0; i<count; i++) str += gibber[Math.floor(Math.random()*gibber.length)]+" ";
return str;
}
function fillLines(count, info=gibberish) {
var str = '', gibber = info.split('\n');
// for (var i=0; i<count; i++) str += gibber[Math.floor(Math.random()*gibber.length)]+"\n";
var f = Math.floor(Math.random()*gibber.length); // form random number
// for (var i=0; i<count; i++) { str += gibber[f]+"\n"; f++; f = (f % gibber.length); }
// return str;
var rstr = [];
for (var i=0; i<count; i++) { rstr.push( gibber[f] ); f++; f = (f % gibber.length); }
return rstr.join('\n');
}
// Note: can mix & match gibberish & lorumIpsum in code below
// initialize for filltext version
function initText() {
let count = 0;
const sel = document.querySelectorAll('.gibber');
for (el of sel) {
if (count % 2 == 0) { el.append(fillWords(10, gibberish)); }
else { el.append(fillWords(50, lorumIpsum)); }
count++;
}
}
// initialize for fillWords version
function initWords() {
let count = 0;
const sel = document.querySelectorAll('.gibber');
for (el of sel) {
if (count % 2 == 0) { el.append(fillWords(10, lorumIpsum)); }
else { el.append(fillWords(50, lorumIpsum)); }
count++;
}
}
// initialize for fillLines version
function initLines() {
let count = 0;
const sel = document.querySelectorAll('.gibber');
for (el of sel) {
if (count % 2 == 0) { el.append(fillLines(1, gibberish)); }
else { el.append(fillLines(5, gibberish)); }
count++;
}
}
// initText();
// initWords();
initLines();
</script>
</body>
</html>
答案 1 :(得分：0)
好吧，您不是在定义readMoreBarca() ...您是在定义readMoreRome()，但从未使用过。
您有重复的代码，这是一个不好的做法，您应该有一个像这样的参数化函数：
function readMore(city) {
let dots = document.querySelector(`.card[data-city="${city}"] .dots`);
let moreText = document.querySelector(`.card[data-city="${city}"] .more`);
let btnText = document.querySelector(`.card[data-city="${city}"] .myBtn`);
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.textContent = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.textContent = "Read less";
moreText.style.display = "inline";
}
}<div class="card" data-city="buda">
<h2>Visit Budapest</h2>
<div class="info"> <span class="date"><i class="far fa-calendar"></i> November 12, 2019</span> <span class="comment"><i class="far fa-comment-alt"></i> 2 comments</span> </div>
<div class="img"><img src="img/szechenyi.jpg" style="height:200px;"> </div>
<p><i>Széchenyi Thermal Baths </i></p>
<p>
Budapest is the capital city of Hungary. It is best known for its arts and culture. It is a relatively small city, however there are much to see and do.
<span class="dots">...</span>
<span class="more" style="display: none;">Situated on thermal springs, there are many naturally heated baths to relax in, the Széchenyi baths are the largest with 15 indoor baths and 3 outdoor. There are many spectacular viewpoints in Budapest, great for capturing the views of the city. From 360 panoramic views up at St Stephens Basilica to a wide view of the parliament and the River at Fisherman’s Bastion. Visit the Museum of Fine Arts and enjoy a day amongst famous European art. Classical music lovers will appreciate a performance at the Academy of Music.</span>
</p>
<button onclick="readMore('buda')" class="myBtn">Read more</button>
</div>
<br>
<div class="card" data-city="barca">
<h2>Visit Barcelona</h2>
<div class="info"> <span class="date"><i class="far fa-calendar"></i> December 06, 2019</span> <span class="comment"><i class="far fa-comment-alt"></i> 5 comments</span> </div>
<div class="img"><img src="img/guell-park.jpg" style="height:200px;"></div>
<p><i>Park Güell </i></p>
<p>
Barcelona, framed for its individuality, cultural interest, and physical beauty, home to art and architecture. Facing the Mediterranean to the southeast,
<span class="dots">...</span>
<span class="more" style="display: none;"> the city is one of a kind. Upon visiting make sure you visit the spectacular and unique Park Güell which was firstly designed for a town up in the mountains by artist Antoni Gaudí. Gaudí's work is admired by architects around the World as being one of the most unique and distinctive styles in modern architecture. Other places worth visiting is the La Sagrada Família, is a giant basilica. With beaches on your doorstop, and art and city culture, this diverse city has everything to offer.</span>
</p>
<button onclick="readMore('barca')" class="myBtn">Read more</button>
</div>
答案 2 :(得分：0)
以下是澄清代码，适合那些正在上面发布的代码中寻找更具体示例的人。
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Show More/Less </title>
<style>
.j { width: 30em; text-align: justify; }
.hide { display: none; }
.pink { background-color: tan; color: white; }
b, span { cursor: pointer; }
</style>
</head>
<body>
<p class="j">Budapest is the capital city of Hungary.
It is best known for its arts and culture.
It is a relatively small city, however there are much to see and do.
<b class="pink" onclick="evtEllipse(this)">…</b>
<span class="hide" onclick="spanEllipse(this)">
Situated on thermal springs, there are many naturally heated baths to relax in,
the Széchenyi baths are the largest with 15 indoor baths and 3 outdoor.
There are many spectacular viewpoints in Budapest, great for capturing the views of the city.
From 360 panoramic views up at St Stephens Basilica to a wide view of the parliament
and the River at Fisherman’s Bastion. Visit the Museum of Fine Arts and enjoy a day amongst
famous European art. Classical music lovers will appreciate a performance at the Academy of Music.
</span>
</p>
<p class="j">
Barcelona, framed for its individuality, cultural interest, and physical beauty, home to art and architecture.
Facing the Mediterranean to the southeast,
<b class="pink" onclick="evtEllipse(this)">…</b>
<span class="hide" onclick="spanEllipse(this)">
the city is one of a kind. Upon visiting make sure you visit the spectacular and unique Park Güell
which was firstly designed for a town up in the mountains by artist Antoni Gaudí.
Gaudí's work is admired by architects around the World as being one of the most unique and distinctive
styles in modern architecture. Other places worth visiting is the La Sagrada Família, is a giant basilica.
With beaches on your doorstop, and art and city culture, this diverse city has everything to offer.
</span>
</p>
<script>
// For: http://www.webdeveloper.com/forum/showthread.php?364215-Show-only-first-line-of-a-paragraph&p=1508263#post1508263
function evtEllipse(info) {
info.nextElementSibling.classList.toggle('hide');
info.classList.toggle('hide');
}
function spanEllipse(info) {
info.classList.toggle('hide');
info.previousElementSibling.classList.toggle('hide')
}
</script>
</body>
</html>
`