首頁猿問使用javascript子字符串更...

使用javascript子字符串更改innerHTML

JavaScript

慕森王 2021-09-30 10:47:44

我正在嘗試使用 javascript 子字符串讀取更多按鈕，但我的代碼不起作用，我可以隱藏文本，但無法在單擊時顯示更多內容<p class="pr">More than 200</p><button class="btn">Read more</button><script> var pr = document.querySelectorAll('.pr'); var btn = document.querySelectorAll('.btn'); for (var i = 0; i < pr.length; i++) { if(pr[i].innerHTML.length >= 200){ var showLess = pr[i].innerHTML.substring(0, 200); pr[i].innerHTML = showLess; } btn.addEventListener('click', showMore); function showMore(){ var showMore = pr[i].innerHTML.substring(0, ); pr[i].innerHTML = showMore; } }</script>

查看完整描述

3 回答

智慧大石

TA貢獻1946條經驗獲得超3個贊

首先，你應該將文本存儲在一個變量中，因為如果你縮短它，javascript 不會記住第一個文本：

var text = pr[i].textContent; // make this the first thing in the for loop

然后，而不是指pr[i].innerHTML.substring 使用text.substring（僅在獲取值時，而不是在設置時）。

我希望這會奏效，還沒有測試過（在我的手機上寫）。

反對回復 2021-09-30

森欄

TA貢獻1810條經驗獲得超5個贊

使用Id代替類的更簡單的版本。

let pr = document.getElementById('pr');

let btn = document.getElementById('btn');

let actualText = pr.innerHTML;

if(pr.innerHTML.length >= 200){

pr.innerHTML = pr.innerHTML.substring(0, 200);

btn.addEventListener('click', () => { pr.innerHTML = actualText;});

}

<p id="pr">This is basic test content which length is More than 200, This is basic test content which length is More than 200, This is basic test content which length is More than 200, This is basic test content which length is More than 200, This is basic test content which length is More than 200, This is basic test content which length is More than 200, This is basic test content which length is More than 200</p>

是的，您需要在更新innerHTML元素之前存儲原始文本內容。

反對回復 2021-09-30

函數式編程

TA貢獻1807條經驗獲得超9個贊

您正在innerHTML使用短字符串覆蓋，因此您需要將原始值保存在變量中。在我的代碼片段中，我將原始字符串保存在more變量中。

此外，document.querySelectorAll('.btn');返回一個NodeList不能直接附加事件偵聽器的對象，您需要遍歷每個節點并將其添加到這些節點中。

在你的代碼中得到一個TypeError在addEventListener這樣的回調并沒有連接到呼叫click事件。

最后，不要使用innerHTML用途，textContent因為這innerHTML是一項昂貴的操作。在這里閱讀更多。

Element.innerHTML 返回 HTML，正如其名稱所示。有時人們使用 innerHTML 在元素內檢索或寫入文本，但 textContent 具有更好的性能，因為它的值不會被解析為 HTML。此外，使用 textContent 可以防止 XSS 攻擊。

var pr = document.querySelectorAll('.pr');

var btn = document.querySelectorAll('.btn');

for(let i =0; i<pr.length; i++){

let more = pr[i].textContent;

if(more.length >= 5){

let showLess = more.substring(0, 5);

pr[i].textContent = showLess;

}

btn.forEach(b => b.addEventListener('click', () => {

console.log(more);

pr[i].textContent = more;

}));

}

反對回復 2021-09-30

3 回答
0 關注
276 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用javascript子字符串更改innerHTML

使用javascript子字符串更改innerHTML

3 回答

添加回答