關于堆疊溢位的第一篇文章:)
我正在嘗試在我的所有 HTML 按鈕上放置一個特定的功能，到目前為止，我在嘗試 2 天后還沒有發現任何有效的功能（編碼新手）。
我基本上想要做的是一個“閱讀更多”按鈕，它會在點擊時顯示文本。.getElementsByClassName 和 .querySelectorAll 到目前為止都沒有作業。如果我只使用帶有#id 的代碼，它可以正常作業，但我知道必須有一種更好的方法來為多個元素使用一個函式，而不是擁有多個 id 并為每個 id 單獨使用該函式。我也嘗試過 forEach() 回圈，但它沒有做任何事情。另外我試過readMoreBtn[length].addEventListener('click', () => {})了，但這也沒有用。
正如我所說，它適用于.getElementByIdand querySelector，但不適用于.getElementsByClassNameor .querySelectorAll。如果我使用querySelectorAll，第一個按鈕有效，但其他按鈕無效。
因為我有興趣讓它與類而不是 id 一起作業，所以我從 HTML 中洗掉了 id 屬性。
我不會發布完整的 HTML，因為它很長，但帶有按鈕的容器如下所示：
<div class="main-container">
<h6 class="main-artist"><em class="main-emph">content</em>content</h6>
<p class="main-p"><span class="moreText"> Lorem ipsum </span></p>
<button class="readMore">read more</button>
</div>
和 JS：
const readMoreBtn = document.getElementsByClassName('.readMore');
const text = document.querySelector('.main-p');
readMoreBtn.addEventListener('click', () => {
text.classList.toggle('show-more');
if(readMoreBtn.innerHTML === "read more") {
readMoreBtn.innerHTML = "read less"
} else {
readMoreBtn.innerHTML = "read more"
}
})
感謝您的幫助，如果您對如何改進我的提問方式有任何建議，請拍下。
編輯：我有多個按鈕，它們都有一個獨特的文本。我的目標是讓按鈕以某種方式在其下方顯示其獨特的文本。這是另一個 HTML 來說明我的意思：
<div class="main-container">
<h6 class="main-artist"><em class="main-emph">content</em>content</h6>
<p class="main-p"><span class="moreText"> Lorem ipsum </span></p>
<button class="readMore">read more</button>
</div>
<div class="main-container">
<h6 class="main-artist"><em class="main-emph">content</em>content</h6>
<p class="main-p"><span class="moreText"> Messi GOAT </span></p>
<button class="readMore">read more</button>
</div>
<div class="main-container">
<h6 class="main-artist"><em class="main-emph">content</em>content</h6>
<p class="main-p"><span class="moreText"> Ipsum Lorem </span></p>
<button class="readMore">read more</button>
</div>
有了這個 JS 代碼，我只能擴展第一個main-p，但不能擴展其他代碼。
const yourFunction = (e)=>{
const text = document.querySelector('.main-p');
text.classList.toggle('show-more');
if(e.target.innerHTML === "read more") {
e.target.innerHTML = "read less"
} else {
e.target.innerHTML = "read more"
}
}
在我的腦海中，有兩種可能有效的解決方案：
我必須以某種方式將每個連接
button到它們main-p的 HTML 中嗎？我試過了，但沒有用。在 JS 中使用回圈。
這兩種可能之一嗎？TIA
uj5u.com熱心網友回復：
有很多方法可以做到這一點。試試這個。
const yourFunction = (e) => {
const text = document.querySelector('.main-p');
text.classList.toggle('show-more');
if (e.target.innerHTML === "read more") {
e.target.innerHTML = "read less"
} else {
e.target.innerHTML = "read more"
}
}<div class="main-container">
<h6 class="main-artist"><em class="main-emph">content</em>content</h6>
<p class="main-p"><span class="moreText"> Lorem ipsum </span></p>
<button class="readMore" onclick="yourFunction(event)">read more</button>
</div>uj5u.com熱心網友回復：
getElementsByClassName()回傳一個HTMLCollection。
并querySelectorAll()回傳一個NodeList。
相比之下querySelector()，getElementById()回傳一個 DOM Element。
這些型別中的每一種都以不同的方式訪問和操作。您將 HTMLCollection 和 NodeList 視為元素。
訪問 HTMLCollection 和 NodeList 中的每個專案的一種方法是首先使用 將它們轉換為陣列Array.from()，然后forEach()在結果陣列上使用來迭代每個元素，在本例中為元素添加一個單擊事件處理程式：
const readMoreBtn = document.getElementsByClassName('readMore');
const text = document.querySelectorAll('.main-p');
console.log(Array.from(text));
Array.from(readMoreBtn).forEach(function(elem) {
elem.addEventListener('click', ({target}) => {
target.textContent = ('read more' === target.textContent) ? 'read less' : 'read more';
});
});<p class="main-p"><span class="moreText"> Lorem ipsum 1</span></p>
<button class="readMore">read more</button>
<p class="main-p"><span class="moreText"> Lorem ipsum 2</span></p>
<button class="readMore">read more</button>
<p class="main-p"><span class="moreText"> Lorem ipsum 3</span></p>
<button class="readMore">read more</button>uj5u.com熱心網友回復：
我更喜歡使用更少的 JS，但更多的 CSS。（更靈活）
示例，只需添加.is-acitve容器（父級），因此只需在 CSS 中設定樣式
const buttons = document.querySelectorAll('.main-container .readMore');
const setContainerActive = (el) => {
el.target.closest('.main-container').classList.toggle('is-active')
}
Array.from(buttons).forEach((el) => {
el.addEventListener('click', setContainerActive)
});.main-container {
/* Defaults */
}
.main-container.is-active {
/* Active */
background: red;
}
/* Example */
.main-container .show-is-active { display:none; }
.main-container.is-active .show-is-active { display: block; }
.main-container .hide-is-active { display:block; }
.main-container.is-active .show-hide-active { display: none; }<div class="main-container">
<h6 class="main-artist"><em class="main-emph">content</em>content</h6>
<p class="main-p"><span class="moreText"> Lorem ipsum </span></p>
<button class="readMore"><span class="show-is-active">read less</span><span class="show-hide-active">read more</span></button>
</div> 轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510217.html