如何僅顯示/隱藏列表中的一個選定項目

我的文章列表有問題。我想使「看更多」按鈕，但與我創建的代碼，當我點擊「更多...」只有最新的飼料顯示。也許你有一些想法如何使它工作？如何僅顯示/隱藏列表中的一個選定項目

var content = document.getElementById('visibleContent').value + '<span id="more_text">' + document.getElementById('readMoreContent').value + '</span>', 


function addArticle() { 
    var container = document.getElementById('article-content'); 
    var html = '<ul>'; 
    for (var i = 0; i < data.length; i++) { 
    html += '<li> <div class="demo-card-wide mdl-card mdl-shadow--2dp"> <div id="articleHeader'+i+'" class="mdl-card__title articleHeader"> <h2 id="articleTitle" class="mdl-card__title-text">' + data[i].doc.title + '</h2></div> <div id="articleContent" class="mdl-card__supporting-text item">' + data[i].doc.content + ' </div> <div class="mdl-card__actions mdl-card--border"> <button id="read_more" onclick="return showMore()" class="mdl-button mdl-js-button mdl-button--primary"> More... </button> <p id="time">' + data[i].doc.time + '</p><div class="mdl-card__menu"> <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> <i class="material-icons">share</i> </button> </div> </li>' 
    } 
    html += '</ul>' 

    container.innerHTML = html; 
} 

function showMore() { 
    var text = document.getElementById('more_text'); 
    if (text.style.display === "block") { 
    text.style.display = "none"; 
    } else { 
    text.style.display = "block"; 
    } 
}

來源

2017-05-23 Adam.G

'showMore（）'函數做了一些非常具體和非常簡單的事情。它顯示/隱藏'id =「more_text」'元素。這不是爲了你嗎？這不是你想要它做什麼？這裏的問題具體是什麼？ – David

'showMore（）'點擊「更多...」按鈕後可以看到文字。我的問題是，當我有4個飼料，只有在最後一個，我可以顯示更多的文字。即使我點擊「更多...」按鈕在其他飼料只有最新的揭示，而不是我想要的。 –

你的HTML在哪裏？ – Pugazh

你不能有相同的id值超過一個元素。如果您的元素的所有都具有相同的id，那麼它只會影響最後一個元素與所述id。您需要爲您的 id值的末尾添加一個數字或類似的值，如id="moretext_1"，然後當觸發該事件的事件爲時，您可以指定id this.id，當確定要控制哪個元素時，可以指定id this.id。

這使用上面解釋的方法，有很多方法可以做到這一點。也許你自己提高。

function showMore(idval) { 
 
    var text = document.getElementById('read_more_'+idval); 
 
    if (text.style.display === "block") { 
 
    text.style.display = "none"; 
 
    } else { 
 
    text.style.display = "block"; 
 
    } 
 
}

<div id="articleContent">Some content</div> 
 
<button onclick="showMore(this.id);" id="x1">Toggle More...</button> 
 
<div id="read_more_x1" style="display:none;">test 1</div> 
 
<hr> 
 
<div id="articleContent">Some content</div> 
 
<button onclick="showMore(this.id);" id="x2">Toggle More...</button> 
 
<div id="read_more_x2" style="display:none;">test 2</div> 
 
<hr> 
 
<div id="articleContent">Some content</div> 
 
<button onclick="showMore(this.id);" id="x3">Toggle More...</button> 
 
<div id="read_more_x3" style="display:none;">test 3</div>

與您的文章保持

此外，以下是如何循環遞增變量i一個例子。

var text = '<div id="articleContent" class="mdl-card__supporting-text item">Some content </div> 
<button onclick="showMore(this.id);" id="x'+i+'" class="mdl-button mdl-js-button mdl-button--primary"> Toggle More... </button> 
<div id="read_more_x'+i+'" style="display:none;">test '+i+'</div>'

來源

2017-05-23 09:59:08 pokeybit

它的工作原理。萬分感謝：） –

如何僅顯示/隱藏列表中的一個選定項目

回答

相關問題